整理一个基于axios请求封装
首先是request.js，这个文件是用来处理axios的配置、设置拦截器等等，它创建了一个实例，并将这个实例导出。代码如下.
import Vue from 'vue'
import axios from 'axios'
// 创建 axios 实例
const service = axios.create({
baseURL: '/user', // 基础地址
timeout: 6000 // 请求超时时间
})
/**
* 请求拦截器,携带每个请求的token(可选)
*/
service.interceptors.request.use(config => {
const token = Vue.ls.get("ACCESS_TOKEN") //token是放在vuex中的state中
if (token) { config.headers['X-Access-Token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
} if (config.method == 'get') { config.params = { _t: Date.parse(new Date()) / 1000, //让每个请求都携带一个不同的时间参数，防止浏览器缓存不发送请求
...config.params } } return config}, (error) => {
return Promise.reject(error)})
/**
* 响应拦截器中的error错误处理
*/const err = (error) => {
if (error.response) { switch (error.response.status) { case 401: console.log({ message: '系统提示',
description: '未授权，请重新登录',
duration: 4 }) break case 403: console.log({ message: '系统提示',
description: '拒绝访问'
}) break
case 404: console.log({ message: '系统提示',
description: '很抱歉，资源未找到!',
duration: 4 }) break case 500: console.log({ message: '系统提示',
description: 'Token失效，请重新登录!'
}) break case 504: console.log({ message: '系统提示',
description: '网络超时'
}) break default: console.log({ message: '系统提示',
description: error.response.data.message, }) break } } return Promise.reject(error)};
/**
* 响应拦截器,将响应中的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}第二个便是manage.js，这个文件主要是书写不同的http请求，get、post等，在请求中配置某些特殊的配置
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: 请求地址
* @param {*} params: 请求参数
*/export function downFileAction(url,params){
return axios({ url: url, params: params, method:'get' , responseType: 'blob' })}
/**
* 用于上传文件
* @param {*} url:请求地址
* @param {*} data:请求体数据
*/export function fileUploadAction(url,data){
return axios({ url: url, data: data, method:'post' , headers:{ 'Content-Type':'multipart/form-data' }, timeout:1000*60*4 //上传时间4分钟
})}最后这个api.js文件就是我们需要写的接口了，把接口都写在一个文件中，也是为了方便我们维护，在使用的时候，导入使用便可
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}附带一个项目中用到的文件下载链接处理
axios.get("/api/excel",{id:'001'}).then(res=>{//返回的数据是二进制文件流
var blob = new Blob([res],{type: 'application/force-download;charset=utf-8'}); var downloadElement = document.createElement('a'); var href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href; downloadElement.download = 'name.xls'; //下载后文件名
document.body.appendChild(downloadElement); downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
})