整理一個(gè)基于axios請(qǐng)求封裝

首先是request.js，這個(gè)文件是用來(lái)處理axios的配置、設(shè)置攔截器等等，它創(chuàng)建了一個(gè)實(shí)例，并將這個(gè)實(shí)例導(dǎo)出。代碼如下.

import Vue from 'vue'
import axios from 'axios'
// 創(chuàng)建 axios 實(shí)例
const service = axios.create({
  baseURL: '/user', // 基礎(chǔ)地址
  timeout: 6000 // 請(qǐng)求超時(shí)時(shí)間
})

/**
 * 請(qǐng)求攔截器,攜帶每個(gè)請(qǐng)求的token(可選) 
 */
service.interceptors.request.use(config => {
  const token = Vue.ls.get("ACCESS_TOKEN") //token是放在vuex中的state中
  if (token) {
    config.headers['X-Access-Token'] = token // 讓每個(gè)請(qǐng)求攜帶自定義 token 請(qǐng)根據(jù)實(shí)際情況自行修改
  }
  if (config.method == 'get') {
    config.params = {
      _t: Date.parse(new Date()) / 1000, //讓每個(gè)請(qǐng)求都攜帶一個(gè)不同的時(shí)間參數(shù)，防止瀏覽器緩存不發(fā)送請(qǐng)求
      ...config.params
    }
  }
  return config
}, (error) => {
  return Promise.reject(error)
})

/**
 * 響應(yīng)攔截器中的error錯(cuò)誤處理
 */
const err = (error) => {
  if (error.response) {
    switch (error.response.status) {
      case 401:
        console.log({
          message: '系統(tǒng)提示',
          description: '未授權(quán)，請(qǐng)重新登錄',
          duration: 4
        })
        break
      case 403:
        console.log({
          message: '系統(tǒng)提示',
          description: '拒絕訪問(wèn)'
        })
        break

      case 404:
        console.log({
          message: '系統(tǒng)提示',
          description: '很抱歉，資源未找到!',
          duration: 4
        })
        break
      case 500:
        console.log({
          message: '系統(tǒng)提示',
          description: 'Token失效，請(qǐng)重新登錄!'
        })
        break
      case 504:
        console.log({
          message: '系統(tǒng)提示',
          description: '網(wǎng)絡(luò)超時(shí)'
        })
        break
      default:
        console.log({
          message: '系統(tǒng)提示',
          description: error.response.data.message,
        })
        break
    }
  }
  return Promise.reject(error)
};

/**
 * 響應(yīng)攔截器,將響應(yīng)中的token取出,放到state中
 */
service.interceptors.response.use((response) => {
  const token = response.headers["authorization"]
  if (token) {
    Vue.ls.set("ACCESS_TOKEN", token) //token是放在vuex中的state中
  }
  return response.data
}, err)

export {
  service as axios
}

第二個(gè)便是manage.js，這個(gè)文件主要是書(shū)寫(xiě)不同的http請(qǐng)求，get、post等，在請(qǐng)求中配置某些特殊的配置

import { axios } from './request'

//get
export function getAction(url,params) {
  return axios({
    url: url,
    method: 'get',
    params: params
  })
}
//post
export function postAction(url,data) {
  return axios({
    url: url,
    method:'post' ,
    data: data
  })
}

//put
export function putAction(url,data) {
  return axios({
    url: url,
    method:'put',
    data: data
  })
}

//deleteAction
export function deleteAction(url,params) {
  return axios({
    url: url,
    method: 'delete',
    params: params
  })
}

/**
 * 下載文件
 * @param {*} url: 請(qǐng)求地址
 * @param {*} params: 請(qǐng)求參數(shù)
 */
export function downFileAction(url,params){
  return axios({
    url: url,
    params: params,
    method:'get' ,
    responseType: 'blob'
  })
}
/**
 * 用于上傳文件
 * @param {*} url:請(qǐng)求地址
 * @param {*} data:請(qǐng)求體數(shù)據(jù)
 */
export function fileUploadAction(url,data){
  return axios({
    url: url,
    data: data,
    method:'post' ,
    headers:{
      'Content-Type':'multipart/form-data'
    },
    timeout:1000*60*4  //上傳時(shí)間4分鐘
  })
}

最后這個(gè)api.js文件就是我們需要寫(xiě)的接口了，把接口都寫(xiě)在一個(gè)文件中，也是為了方便我們維護(hù)，在使用的時(shí)候，導(dǎo)入使用便可

import { getAction,deleteAction,putAction,postAction,downFileAction,fileUploadAction} from '@/api/manage'

const getTest = (params)=>getAction("/api/user/get",params);
const deleteActionTest = (params)=>deleteAction("/api/user/delete",params);
const putActionTest = (params)=>putAction("/api/user/put",params);
const postActionTest = (params)=>postAction("/api/user/post",params);
const downFileActionTest = (params)=>downFileAction("/api/user/downfile",params);
const fileUploadActionTest = (params)=>fileUploadAction("/api/user/fileupload",params);


export {
  getTest,
  deleteActionTest,
  putActionTest,
  postActionTest,
  downFileActionTest,
  fileUploadActionTest
}

附帶一個(gè)項(xiàng)目中用到的文件下載鏈接處理

axios.get("/api/excel",{id:'001'}).then(res=>{//返回的數(shù)據(jù)是二進(jìn)制文件流
    var blob = new Blob([res],{type: 'application/force-download;charset=utf-8'});
    var downloadElement = document.createElement('a');
    var href = window.URL.createObjectURL(blob); //創(chuàng)建下載的鏈接
    downloadElement.href = href;
    downloadElement.download = 'name.xls'; //下載后文件名
    document.body.appendChild(downloadElement);
    downloadElement.click(); //點(diǎn)擊下載
    document.body.removeChild(downloadElement); //下載完成移除元素
    window.URL.revokeObjectURL(href); //釋放掉blob對(duì)象 
  })