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#