axios請求、和返回數據攔截,統一請求報錯提示_012

axios請求、和返回數據攔截,統一請求報錯提示

官方文檔

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

https://www.kancloud.cn/yunye... 中文文檔

請求和返回攔截,添加統一的報錯信息

請求的配置能夠經過閱讀官方文檔來進行配置。axios api也很簡介,多看看再本身嘗試一下就會了
下面是我寫的一個在react中的應用,UI用的阿里的Antd 框架,因此報錯信息直接用全局彈窗來提示了。比較簡陋。
寫好以後,在寫發送請求的文件中引用request 就能夠了。css

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;
https://github.com/axios/axios
相關文章
相關標籤/搜索