axios通用介面封裝 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);
        return Promise.reject(err);
    } else {
        return Promise.reject(err);
    }
});

export default app

 

axios通用介面封裝 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