Reactjs 在所有Axios实例中使用的Axios中间件

我在react应用程序中使用axios，在我的许多脚本中使用“axios导入axios”。我想使用一种中间件，它可以为所有axios调用/错误调用。如何处理此问题？

根据文档-您需要创建一个文件，即

// api-client.js

import axios from 'axios';

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    console.log(config);
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

export default axios;

然后从容器或控制器导入上述文件：

// Home.js
import apiClient from './api-client.js';

---

拦截器是Axios实现这一点的方法。但对我来说，它太有限，与Axios的API纠缠在一起，难以测试，等等

Axios中间件 所以我编写了这个模块，这是一个简单的中间件服务，它将自己挂接到axios实例（全局或本地实例）中，并提供一个简单、自包含且易于测试的中间件API

注意：它在耦合最小的大型应用程序中大放异彩

简单例子 这里有一个

它应该输出：

准备提取。
应要求
同步
答复
收到：{用户id:1，id:1，标题：。。。

假设我们有下面要测试的自包含中间件类

export default class ApiErrorMiddleware {
  constructor(toast) {
    this.toast = toast;
  }

  onResponseError(err = {}) {
    let errorKey = 'errors.default';
    const { response } = err;

    if (response && response.status) {
      errorKey = `errors.${response.status}`;
    } else if (err.message === 'Network Error') {
      errorKey = 'errors.network-error';
    }

    this.toast.error(errorKey);
    throw err;
  }
}

那真的很简单，我们甚至不需要模仿Axios

import ApiErrorMiddleware from '@/middlewares/ApiErrorMiddleware';

describe('ApiErrorMiddleware', () => {
  let toast;
  let middleware;

  // Jest needs a function when we're expecting an error to be thrown.
  function onResponseError(err) {
    return () => middleware.onResponseError(err);
  }

  beforeEach(() => {
    toast = { error: jest.fn() };
    middleware = new ApiErrorMiddleware(toast);
  });

  it('sends a code error message', () => {
    hasKey = true;
    expect(onResponseError({ response: { status: 404 } })).toThrow();
    expect(toast.error).toHaveBeenLastCalledWith('errors.404');
  });
});

前一段时间我们有中间件需求，Axis不支持它，所以我们创建了tinka，现在即使axios有它，api也非常糟糕，所以我仍然使用tinka，它在我看来要好得多。特别是为您创建SDK api

import ApiErrorMiddleware from '@/middlewares/ApiErrorMiddleware';

describe('ApiErrorMiddleware', () => {
  let toast;
  let middleware;

  // Jest needs a function when we're expecting an error to be thrown.
  function onResponseError(err) {
    return () => middleware.onResponseError(err);
  }

  beforeEach(() => {
    toast = { error: jest.fn() };
    middleware = new ApiErrorMiddleware(toast);
  });

  it('sends a code error message', () => {
    hasKey = true;
    expect(onResponseError({ response: { status: 404 } })).toThrow();
    expect(toast.error).toHaveBeenLastCalledWith('errors.404');
  });
});