axios 封裝及取消請求

axios通用function封裝 start

• http.js
• 引入了移動端 vant 框架
• 注：接口地址，加密秘鑰，簽名方式 根據實際情況而定適當修改

import axios from 'axios';
import md5 from 'md5';
import Vue from 'vue';
import { Toast,Dialog } from 'vant';
Vue.use(Toast);
Vue.use(Dialog);

import vm from '@/main.js'
import appconfig from "./appconfig";

var app = {};
app.host = appconfig.host;
app.fileHost = appconfig.upload_host;


//實例化 axios;
const myHttp = axios.create({
    baseURL: app.host,
    timeout: 15000,
    headers: {'Content-Type': 'application/json;charset=UTF-8'}
});

// 請求時候攔截器;發送數據之前處理的內容;
myHttp.interceptors.request.use((config) => {
    return config;
}, (err) => {
    return Promise.reject(err,'攔截器錯誤');
});


/**
  var CancelToken = axios.CancelToken;
  var source = CancelToken.source();
  取消請求; 接口傳入source  source.cancel(); 就可以取消發出的請求了;
  @param url  地址
  @param type  請求類型;
  @param d     參數 object
  @param loadingtext  loading 提示文字;
  @param source   取消令牌token;
 */
app.http = (url,type,d,loadingtext,source) => {
    if(!d){
        return Promise.reject(d);
    }
    if(loadingtext){
        Toast.loading({
            message: loadingtext,
            forbidClick: false,
            duration:9000,
        });
    }
    let key = "秘鑰字符串";
    let time = Math.floor((new Date()).getTime());
    let dataStr = JSON.stringify(d);

    let apisign = md5(key + time + dataStr);
    let userinfo = Vue.prototype.getCookie('userinfo');

    if(userinfo == null || userinfo == "" || userinfo == undefined){
        userinfo = {token:'',uid:''};
    }else{
        userinfo = JSON.parse(userinfo);
    }
    let token = userinfo.token||'';
    let uid = userinfo.uid||'';
    let appHead = {
        'uid':uid||0,
        'token':token||'',
        'sign':apisign||'',
        'version':1,
        'source':'android',
        'area':'CN',
        'time':time,
    };

    return myHttp({
        method:type,
        url: "/app"+url,
        data: d,
        cancelToken: source.token,
        headers:{appHead:JSON.stringify(appHead),'Content-Type':'application/json;charset=UTF-8'},
        timeout:15000,

    });
};

// 上傳圖片到阿里雲
app.ImgUpload = (url, type, d,loadingtext,source)=>{
    if(!d){
        return Promise.reject(d);
    }
    if(loadingtext){
        Toast.loading({
            message: loadingtext||'上傳中...',
            forbidClick: false,
            duration:9000,
        });
    }
    let key = "秘鑰字符串";
    let time = Math.floor((new Date()).getTime());
    let dataStr = '';

    let apisign = md5(key + time + dataStr);
    let userinfo = Vue.prototype.getCookie('userinfo');

    if(userinfo == null || userinfo == "" || userinfo == undefined){
        userinfo = {token:'',uid:''};
    }else{
        userinfo = JSON.parse(userinfo);
    }
    let token = userinfo.token||'';
    let uid = userinfo.uid||'';
    let appHead = {
        'uid':uid||0,
        'token':token||'',
        'sign':apisign||'',
        'version':1,
        'source':'android',
        'area':'CN',
        'time':time,
    };

    return myHttp({
        method:type,
        url: app.fileHost+"/app"+url+"?folder=kangtai",
        data: d,
        cancelToken: source?source.token:"", // 每次請求取消憑證;
        headers:{appHead:JSON.stringify(appHead),'Content-Type':'application/json;charset=UTF-8'},
        timeout:15000,
    });
}


// 響應時候攔截器;
myHttp.interceptors.response.use((response) => {
    vm.$toast.clear();
    // 對響應的數據再做什么處理; 判斷登錄是否失效,判斷其他錯誤;
    if(response.status == 500){
        console.log(response.status);
    }
    else if(response.status >= 400){
        console.log(response.status);
    }
    else if(response.status >= 300){
        console.log(response.status);
    }
    else if(response.status == 200){
        return response.data;
    }
    else{
        console.log(response.status);
    }

}, (err) => {
    vm.$toast.clear();
    if (axios.isCancel(err)) {
        console.log('取消本次請求', err.message); // err.message 是調用 source.cancel('取消成功'); 傳入的參數
        return Promise.reject(err);
    } else {
        return Promise.reject(err);
    }
});

export default app

axios通用function封裝 end

---

外部 頁面調用 start

// 以上傳圖片為例
afterRead(files){
  var that = this;    
  var fmData  = new FormData()
  fmData.append('files',files.file)
  fmData.append('folder','test')
  console.log(fmData);
  // 生成 取消 令牌
  let CancelToken = axios.CancelToken;
  let source = CancelToken.source();
  this.source = source;

  app2.ImgUpload("/oss/imgs",'post',fmData,'上傳中...',source)
  .then(res=>{
     if(res.status == 1){
	  console.log(res.data);
	  this.$toast({message:res.info});
      }else{
	  this.$toast({message:res.info});
      }
   })
   .catch(err=>{
       console.log(err);
   });

    // 一秒后直接取消上傳
   setTimeout(()=>{
       this.source.cancel('取消請求'); // 參數可選
   },1000)
      
}

外部 頁面調用 end