axios要求パッケージ(VUE)

4654 ワード

前にFetchを出しましたが、パッケージをお願いしました。友達がaxiosとの違いを聞きました。ついでにaxiosのパッケージをお願いします。
主要コード

import qs from 'qs';
import axios from 'axios';
import { Message } from 'iview';
import uitls from './util';

let baseUrl = 'http://192.168.0.1:8888/'; //    baseUrl

const CancelToken = axios.CancelToken;
const source = CancelToken.source();
//  token
function setToken() {
  if (utils.local.get('token')) {
    axios.defaults.headers.common['token'] = utils.getLocal('token');
  }
}

//       
axios.interceptors.request.use(config => {
  store.commit('UPDATE_LOADING', true); //  loading,     vuex    
  //             ,        ,(            )
  if (config.url.indexOf('login') < 0) {
    let lessTime = Number(uitls.local.get('expireTime')) - Date.now(); //                 
    if (lessTime <= 0) {
      Message.error({
        content: '    ',
        duration: 5
      });
      source.token('token   ');
      store.commit('UPDATE_LOADING', false); //  loading
      window.location.href = '/login';
      utils.local.clear();
    }
  }
  return config;
});
//       
axios.interceptors.response.use(res => {
  if (res.config.url.indexOf('login') >= 0) {
    const { token, expireTime, code, data } = res.data;
    if (code == '200') {
      //            ,    ,()
      //...................
      utils.local.set('expireTime', expireTime); //    
      utils.local.set('token', token);
    }
  }
  return res;
});

//      
function formatReq(type, url, data) {
  setToken();
  return new Promise((reslove, reject) => {
    axios({
      method: type,
      url: `${baseUrl}${url}`,
      headers: {
        //             
        'content-Type': 'application/x-www-form-urlencoded'
      },
      cancelToken: source.token,
      data: qs.stringify(data) //java   qs 
      // data:JSON.stringify(data)//PHP   JSON 
    })
      .then(r => {
        store.commit('UPDATE_LOADING', false); //  loading
        //                  ,      ,res.data.code === '6666'      login
        reslove(r);
      })
      .catch(e => {
        store.commit('UPDATE_LOADING', false); //  loading
        reject(e.message);
        Message.error(e.message);
      });
  });
}

const Http = {
  get: (url, query) => {
    url = utils.formatUrl(url, query);
    setToken();
    return axios.get(`${baseUrl}${url}`, { cancelToken: source.token }).then(r => r);
  },
  post: (url, data) => formatReq('post', url, data),
  put: (url, data) => formatReq('put', url, data),
  patch: (url, data) => formatReq('patch', url, data),
  delete: (url, data) => formatReq('delete', url, data)
};

export default Http;
util.js
//  get  ,        
let formatUrl = obj => {
  let params = Object.values(obj).reduce((a, b, i) => `${a}${Object.keys(obj)[i]}=${b}&`, '?');
  return params.substring(0, params.length - 1);
};
//        
let local = {
  set(key, value) {
    if (checkLocalStorage()) {
      window.localStorage.setItem(key, value);
    } else {
      let Days = 30;
      let exp = new Date();
      exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
      document.cookie = key + '=' + escape(value) + ';expires=' + exp.toGMTString();
    }
  },
  get(key) {
    if (checkLocalStorage()) {
      return window.localStorage.getItem(key) ? window.localStorage.getItem(key) : null;
    } else {
      return getCookie(key);
    }
  },
  clear(key) {
    if (checkLocalStorage()) {
      window.localStorage.removeItem(key);
    } else {
      let exp = new Date();
      exp.setTime(exp.getTime() - 1);
      let cval = getCookie(key);
      if (cval != null) document.cookie = key + '=' + cval + ';expires=' + exp.toGMTString();
    }
  }
};

function checkLocalStorage() {
  //      Localstorage
  return window.localStorage && (window.localStorage.setItem('a', 123), window.localStorage.getItem('a') == 123)
    ? true
    : false;
}
function getCookie(name) {
  let arr,
    reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');
  if ((arr = document.cookie.match(reg))) return unescape(arr[2]);
  else return null;
}

export default {
  formatUrl,
  local
};
main.js導入
import Http from './helper/api/axios.js';
Vue.prototype.Http = Http;
使用
async getData(){
   let res = await this.Http.get('url', data);
}