axios请求、和返回数据拦截，统一请求报错提示_012

11次阅读

共计 942 个字符，预计需要花费 3 分钟才能阅读完成。

axios 请求、和返回数据拦截，统一请求报错提示
官方文档

https://github.com/axios/axios 英文文档

https://www.kancloud.cn/yunye… 中文文档
请求和返回拦截，添加统一的报错信息
请求的配置可以通过阅读官方文档来进行配置。axios api 也很简介，多看看再自己尝试一下就会了下面是我写的一个在 react 中的应用，UI 用的阿里的 Antd 框架，所以报错信息直接用全局弹窗来提示了。比较简陋。写好之后，在写发送请求的文件中引用 request 就可以了。
import axios from ‘axios’;
import {message} from ‘antd’;
import NProgress from ‘nprogress’;
import ‘nprogress/nprogress.css’;

// 拦截请求
// Add a request interceptor
axios.interceptors.request.use(
config => {
NProgress.start();
return config;
},
error => {
message.error(‘ 请求错误，请重试 ’);
return Promise.reject(error);
},
);

// 拦截返回数据
// Add a response interceptor
axios.interceptors.response.use(
response => {
NProgress.done();
if (response.data.RetCode === 101) {
message.error(response.data.Message);
return response;
}
if (response.data.RetCode === 100) {
message.error(response.data.Message);
return response;
}
return response;
},
error => {
message.error(‘ 请求错误，请重试 ’);
NProgress.done();
return Promise.reject(error);
},
);
export default request;