web-dev-qa-db-fra.com

Middleware Axios à utiliser dans toutes les instances d'Axios

J'utilise axios dans mon application react en utilisant import axios from 'axios dans plusieurs de mes scripts. Je veux utiliser une sorte de middleware qui est invoqué pour tous les appels/erreurs axios. Comment puis-je aborder cela?

reactjsaxiosmiddleware
6
Shakil Ahmed

Les intercepteurs sont le moyen d'Axios de le faire. Mais pour moi, c'était trop limité, emmêlé dans l'API d'Axios, difficile à tester, etc.

Axios-middleware

J'ai donc écrit le module axios-middleware , un service middleware simple qui se connecte dans votre instance axios (globale ou locale) et fournit un simple, self -API middleware contenu et facilement testable.

Remarque: il brille dans les plus grandes applications où un couplage minimal est vraiment important.

Exemple simple

Voici un exemple simple de la documentation

import axios from 'axios';
import { Service } from 'axios-middleware';

const service = new Service(axios);

service.register({
  onRequest(config) {
    console.log('onRequest');
    return config;
  },
  onSync(promise) {
    console.log('onSync');
    return promise;
  },
  onResponse(response) {
    console.log('onResponse');
    return response;
  }
});

console.log('Ready to fetch.');

// Just use axios like you would normally.
axios('https://jsonplaceholder.typicode.com/posts/1')
  .then(({ data }) => console.log('Received:', data));

Il devrait produire:

Ready to fetch.
onRequest
onSync
onResponse
Received: {userId: 1, id: 1, title: ...

Test d'un middleware

Supposons que nous ayons la classe de middleware autonome suivante que nous voulons tester.

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;
  }
}

Ensuite, c'est vraiment facile, nous n'avons même pas besoin de nous moquer d'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');
  });
});
0
Emile Bergeron