家装网站建设公司哪家好,会展设计用什么软件,广州网站设计公司哪家好,天河建设网站设计一个项目中如果http请求发生了错误/异常#xff0c;比如返回码4xx#xff08;表示没有授权#xff0c;登录过期等#xff09;#xff0c;我们希望能够在axios在第一时间就能拦截获取到#xff0c;然后直接提示报错的错误信息#xff0c;而不是在发起请求的地方#xff…一个项目中如果http请求发生了错误/异常比如返回码4xx表示没有授权登录过期等我们希望能够在axios在第一时间就能拦截获取到然后直接提示报错的错误信息而不是在发起请求的地方单独去做判断这样效率太低。
所以这个时候axios全局路由拦截就登场了
axios全局路由代码通常是在构建axios实例注入的下面就是代码模板 const instance axios.create({}) instance.interceptors.response.use( // 回调函数1 入参是请求成功时的返回结果response (response) { // 请求正常时的代码块 return response }, // 回调函数2 入参是请求失败时的返回错误: error (error ) { // 请求发生错误时的代码块。 } ); 下面是一个应用实例中的代码 import axios from axios; import { message } from antd import { useNavigate } from react-router-dom; const baseURL xxxxx // 创建axios实例 const instance axios.create({ baseURL, headers: { Authorization: xxxxxxxxx, }, }); const navigate useNavigate(); // 设置axios全局路由拦截 instance.interceptors.response.use( (response) { return response; }, (error ) { if (!error.response) { message.error(网络异常, 3); } else if ( error.response.status ! 200) { console.log(error.response); error.response.data.err? message.error(error.response.data.err,3): null; navigate(/signin); } } } ); 总结axios全局路由拦截的设置方法分为两步
1. 通过 axios.create方法创建axios实例
2. 通过axios实例的interceptors.response.use方法创建拦截规则这个方面里面有两个回调函数 a. 回调函数1 入参是请求成功时的返回结果response b. 回调函数2 入参是请求失败时的返回错误: error
