Vue axios 拦截器

发布时间:2023年12月26日

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

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

请求拦截器就是你在发起请求的时候应该做什么事情,响应拦截器就是你在接收到这个请求之后应该去干什么。

拦截器可以拦截每一次请求和响应,然后进行相应的处理。
  • 请求拦截应用场景: 发起请求前添加header

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

响应拦截应用场景:
  • 统一处理API响应状态码200或非200的提示消息,拿到业务的状态码。做一些自定义的响应配置
  • 统一处理catch异常提示信息

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

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

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)
 }
)

?响应拦截器

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
文章来源:https://blog.csdn.net/qq_34556414/article/details/135218919
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。