之前有發(fā)過Fetch請求封裝,有朋友問跟axios有什么區(qū)別,順便發(fā)一份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/'; //設(shè)置你的baseUrl

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

//請求驗證攔截器
axios.interceptors.request.use(config => {
  store.commit('UPDATE_LOADING', true); //顯示loading,這里沒有用vuex可以省去
  //判斷請求不是登陸接口的時候,字段是不是過期了,(根據(jù)業(yè)務(wù)邏輯做對應(yīng)的處理)
  if (config.url.indexOf('login') < 0) {
    let lessTime = Number(uitls.local.get('expireTime')) - Date.now(); //后臺返回的過期時間與現(xiàn)在的進行計算
    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;
});
//返回數(shù)據(jù)攔截器
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: {
        //這里的請求頭與后臺商量設(shè)置
        'content-Type': 'application/x-www-form-urlencoded'
      },
      cancelToken: source.token,
      data: qs.stringify(data) //java后臺用qs轉(zhuǎn)
      // data:JSON.stringify(data)//PHP后臺用JSON轉(zhuǎn)
    })
      .then(r => {
        store.commit('UPDATE_LOADING', false); //隱藏loading
        //這里可以添加指定對應(yīng)狀態(tài)碼的處理方式,比如登陸過期,res.data.code === '6666' 路由跳轉(zhuǎn)到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請求，傳入?yún)?shù)對象拼接
let formatUrl = obj => {
  let params = Object.values(obj).reduce((a, b, i) => `${a}${Object.keys(obj)[i]}=$&`, '?');
  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);
}