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

在使用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  //对外暴露,用于在其他位置调用
相关推荐
伍哥的传说2 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi9878383 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊15 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听11 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿1 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉1 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽1 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课1 小时前
React useEffect 详解与运用
前端·react.js
我想说一句1 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1231 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为