Axios请求拦截器和Axios响应拦截器

DngYT2024-09-25 14:40

在使用axios进行HTTP请求时，请求拦截器（Request Interceptors）和响应拦截器（Response Interceptors）是非常有用的功能，它们允许你在请求被发送到服务器之前或在服务器响应被then或catch处理之前对它们进行拦截。

一、安装axios

javascript 复制代码

npm install axios

二、导入axios

javascript 复制代码

//axios基础封装
import axios from "axios";
import { ElMessage } from "element-plus";

三、创建一个可以发起请求获得响应的实例

javascript 复制代码

const httpInstance = axios.create({
    timeout:50000
})

四、配置请求拦截器

javascript 复制代码

//配置拦截器
//axios请求拦截器
httpInstance.interceptors.request.use(config =>{
    return config
},e => Promise.reject(e))

五、配置响应拦截器

javascript 复制代码

//axios响应拦截器
httpInstance.interceptors.response.use(res =>res.data,e =>{
    if(e.response.status==401){
        // console.log("请登录")
        ElMessage.error("请先登录")
        //跳转登录页面
    }else{
        // console.log("其他状态")
        ElMessage({type:'error',message:'请重新登录'+e})
    }
    return Promise.reject(e)
})

export default httpInstance  //对外暴露，用于在其他位置调用