脚本宝典收集整理的这篇文章主要介绍了前端快闪四: 拦截axios请求和响应,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
马甲哥继续在同程艺龙写一点大前端:
今天我们来了解一下 如何拦截axios请求/响应?
axios是一个基于 promise 的网络请求库,可以用于浏览器和 node.js, promise 类似于C#的Task async/await机制,以同步的代码风格编写异步代码。
axios一般发起的是ajax请求,我们一般会封装处理一些通用的 请求/响应动作。
比如马甲哥就遇到:
其中关键的就是用到axios的拦截器:
export interface AxiosInterceptorManager<V> {
use<T = V>(onFulfilled?: (value: V) => T | Promise<T>, onRejected?: (error: any) => any): number;
eject(id: number): void;
}
仔细围观use
sdk,支持传入两个函数,
表示请求(响应)一旦准备好了/失败了,你可以注入的动作。
精简代码如下:
import axios from 'axios';
import {
message
} from 'antd'
const service = axios.create({
baseURL: process.env.REACT_APP_APIBASEURL,
timeout: 5000
})
// 添加请求拦截器: 这是向后台服务器发起的ajax请求
service.interceptors.request.use((reqconfig) => {
reqconfig.withCredentials = true;
return reqconfig;
}, (error) => {
return Promise.reject(error);
});
// 添加响应拦截器
service.interceptors.response.use((response) => {
return response;
}, (error) => {
if (error.response && error.response.status === 401) {
message.error("无权限操作,请联系tvs运维.")
}
return Promise.reject(error);
});
以上对于前端老鸟不值一提,但是上述拦截动作对于把握全栈web开发必不可少。
以上是脚本宝典为你收集整理的前端快闪四: 拦截axios请求和响应全部内容,希望文章能够帮你解决前端快闪四: 拦截axios请求和响应所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。