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";
import qs from "qs";
// 拦截所有有请求与回复
// Add a request interceptor
axios.interceptors.request.use(
config => {
NProgress.start();
if (config.method != "get") {
config.data = qs.stringify(config.data);
}
// withCredentials=true
config.headers["Content-Type"] = "application/x-www-form-urlencoded";
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 axios;