axios做统一请求和拦截

前置条件

import axios from "axios";
import { Message, MessageBox } from "element-ui";
import store from "../store";
import { getToken } from "@/utils/token";

统一设置请求头 

// 创建axios实例

// https://www.kancloud.cn/yunye/axios/234845

const service = axios.create({

baseURL: process.env.BASE_API, // api的base_url

timeout: 5000, // 请求超时时间

// 所有请求都以Json形式传送

// 会有预检请求，服务端需要正常通过OPTIONS请求

// http://www.ruanyifeng.com/blog/2016/04/cors

headers: {

'Content-type': 'application/json;charset=UTF-8'

}

})

登录拦截 和 文件流拦截

// response拦截器

service.interceptors.response.use(

response => {

// console.log(response)

const headers = response.headers

if (response.data.code === 200) {

return response.data

// 拦截octet-stream 或 vnd.ms-excel 或 vnd.openxmlformats-officedocument.spreadsheetml.sheet 文件流并处理

} else if (headers['content-type'] === 'application/octet-stream;charset=utf-8' || headers['content-type'] === 'application/vnd.ms-excel;charset=utf-8' || headers['content-type'] === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8') {

// console.log(response)

return response.data

} else {

Message({

message: response.data.message,

// message: response.data.msg,

type: 'error',

duration: 5 * 1000

})

return Promise.reject('error')

}

},

error => {

// 401:需要认证

// if (error.response.code === 401) {

if (error.response && error.response.status === 401) {

MessageBox.confirm('需要重新登录', '登录', {

confirmButtonText: '登录',

cancelButtonText: '取消',

type: 'warning'

}).then(() => {

store.dispatch('FedLogout').then(() => {

location.reload()// 为了重新实例化vue-router对象 避免bug

})

})

} else {

Message({

message: error.response && error.response.data.message,

// message: error.response.data.msg,

type: 'error',

duration: 5 * 1000

})

}

return Promise.reject(error)

}

)