Vue集成axios配置文件request.js

首先，Vue安装axios命令：npm i axios -S

request.js配置文件封装如下：

// 接口请求封装：Vue基于axios封装request接口请求——request.js文件
// Axios是一个基于promise的Ajax网络请求库，作用于node.js和浏览器中，在服务端它使用原生node.js http模块, 而在客户端 (浏览器端) 则使用XMLHttpRequests（XHR）
import axios from axios
import router from ../router

// 1. 创建axios实例request
const request = axios.create({
          
   
    baseURL: "/api",  // 注意：这里是全局统一加上了/api前缀，即所有接口都会加上/api前缀，页面里面写接口的时候就不要加/api了，否则会出现2个/api，类似/api/api/user这样的报错，切记！！
    timeout: 5000  // 请求超时时间
})

// 2. request添加请求拦截器：可以自请求发送前对请求做一些处理，比如统一加token，对请求参数统一加密
request.interceptors.request.use(
    config => {
          
   
        config.headers[Content-Type] = application/json;charset=utf-8;
        config.headers["token"] = sessionStorage.getItem("token")
        // config.headers[token] = user.token;  // 设置请求头

        // 取出sessionStorage里面缓存的用户信息，是json字符串
        /*let userJson = sessionStorage.getItem("user")
        if (!userJson) {
            router.push("/login")  // 若登录用户信息为空则跳转至登录页面
        }*/
        return config
    },
    error => {
          
   
        return Promise.reject(error)
    }
);

// 3. response添加响应拦截器：可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
          
   
        let res = response.data;  // 使用axios动态获取response里的data数据。存储token到localStorage
        if (res.code == 401) {
          
   
            router.push("/")
            localStorage.clear()
            sessionStorage.clear()
        }
        // 如果是返回的文件（blob）
        if (response.config.responseType === blob) {
          
   
            return response
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === string) {
          
   
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
          
   
        console.log(err + error)  // for debug
        return Promise.reject(error)
    }
)

export default request