大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

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

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;
https://github.com/axios/axios