请求拦截器和响应拦截器

请求拦截器和响应拦截器都需要在新建的request文件夹中书写的request.js中书写

步骤一: 引入axios配置文件

引入axios配置文件才能使用axios的方法

import axios from "axios";

 

步骤二:创建axios 实例(instance)

const instance = axios.create({
    baseURL: "http://kumanxuan1.f3322.net:8881/cms",
    timeout: 5000,// 设置请求时间
})

 

步骤三:设置请求拦截器

在发送请求前就会执行此函数 config是用来记录本地请求的相关信息的一个对象 请求拦截器能用来做请求前的操作(例如:发送token数据)

instance.interceptors.request.use(config => {
    console.log("执行了 请求拦截器的代码", config);
    return config
}, err => {
    return Promise.reject(err)
})

实例:发送token数据

 let token = localStorage.getItem("token")
   if (token) {
  config.headers["x-auth-token"] = token
  }

 

步骤四:设置响应拦截器

在接收到后端服务器的响应之后,进入到组件内部的then方法之前执行这里的代码 res 是axios封装好的一个响应对象,res.data即为后端服务器返回的数据 响应拦截器能用来做响应后渲染前的一些数据统一处理操作

instance.interceptors.response.use(config => {
    console.log("执行了 响应拦截器的代码", config);
    return res.data
}, err => {
    return Promise.reject(err)
})

 

步骤五:instance实例丢回

将instance实例丢回app.vue ,与步骤二形成呼应

export default instance