Vue axios 拦截器

正常情况下打开浏览器前端页面向后端发起请求使用的是axios，无论是原生的axios还是自己封装的axios都看成是axios。发起请求之后后端去数据库里面拿数据，然后返回给前端。

发起请求的地方是axios，并且你能够封装这个axios，那么你就可以添加拦截器。

请求拦截器就是你在发起请求的时候应该做什么事情，响应拦截器就是你在接收到这个请求之后应该去干什么。
拦截器可以拦截每一次请求和响应，然后进行相应的处理。

请求拦截应用场景：发起请求前添加header

使用最多的场景就是前端调用后端，后端是有鉴权逻辑的，前端需要添加一个token。前端在登入的时候就应该获取这个token了，这个token加到url的参数之内。
响应拦截应用场景：

统一处理API响应状态码200或非200的提示消息，拿到业务的状态码。做一些自定义的响应配置
统一处理catch异常提示信息

主要去处理响应是否成功，拿到返回业务状态码的逻辑，这个时候其实是自定义的响应，到底业务有没有成功，这决定了你的前端展示。

这些都是优先于你的axios.get()/post()去执行的，不管是在get/post发起请求之前还是获得响应之后，你得先经过拦截器！！！不然封装也没多大的意义。

javascript 复制代码

import axios from "axios"

const axios_instance = axios.create({
    baseURL: 'http://httpbin.org',
    timeout: 5000,
})

//请求之前要去干什么
//添加请求拦截器,固定写法，config是接受参数，可以取其他名称
//能够利用config的方式去做请求拦截上面的配置
axios_instance.interceptors.request.use(
    config => {
    //在请求之前做的事情，比如添加请求头
    config.headers['Test-header'] = 'zhangsan'
    return config
},
    error=>{
    //请求发生了error，处理请求错误
    //axios是基于ajax和promise封装的
    //Promise.reject代表在使用instance发起请求的时候，失败了在catch语句中可以获取
    //.then .catch .finally都是promise提供的能力
    return Promise.reject(error)
 }
)

响应拦截器

javascript 复制代码

import axios from "axios"

const axios_instance = axios.create({
    baseURL: 'http://httpbin.org',
    timeout: 5000,
})

//请求之前要去干什么
//添加请求拦截器,固定写法，config是接受参数，可以取其他名称
//能够利用config的方式去做请求拦截上面的配置
axios_instance.interceptors.request.use(
    config => {
    //在请求之前做的事情，比如添加请求头
    config.headers['Test-header'] = 'zhangsan'
    return config
},
    error=>{
    //请求发生了error，处理请求错误
    //axios是基于ajax和promise封装的
    //Promise.reject代表在使用instance发起请求的时候，失败了在catch语句中可以获取
    //.then .catch .finally都是promise提供的能力
    return Promise.reject(error)
 }
)


//添加响应拦截器，响应之后需要干什么
//先在这里处理，最后到你的.vue组件当中的.then().catch().finally()中处理
//要先经过这个地方
axios_instance.interceptors.response.use(
    response =>{
    //响应接收后做的事情，在.then .catch接受之前
    //业务层的报错 
        if(response.data.code != 200){
            alert('数据请求失败')
            return Promise.reject(response)
        }
        return response
    },
    error =>{
        //状态码非200范围内
        return Promise.reject(error)
    }
)

export default axios_instance