Промежуточное ПО Axios для использования во всех случаях Axios - PullRequest
Новая
       9

Промежуточное ПО Axios для использования во всех случаях Axios

0 голосов
/ 12 ноября 2018

Я использую axios в своем приложении реакции, используя import axios from 'axios во многих моих скриптах. Я хочу использовать своего рода промежуточное программное обеспечение, которое вызывается для всех вызовов / ошибок axios. Как мне подойти к этому?

Ответы [ 2 ]

0 голосов
/ 14 августа 2019

Перехватчики - это способ Axios сделать это. Хотя для меня это было слишком ограниченным, запутанным в API Axios, сложным для тестирования и т. Д.

Вардар-промежуточный слой

Итак, я написал модуль axios-middleware , простой сервис промежуточного программного обеспечения, который перехватывает себя в вашем экземпляре axios (глобальном или локальном) и предоставляет простой API-интерфейс промежуточного программного обеспечения, легко проверяемый.

Примечание: светит в больших приложениях, где действительно важно минимальное связывание.

Простой пример

Вот простой пример из документации 

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

Должен вывести: 

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

Тестирование промежуточного программного обеспечения

Допустим, у нас есть следующий автономный класс промежуточного ПО, который мы хотим протестировать. 

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

Тогда это действительно легко, нам даже не нужно издеваться над Аксиосом. 

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 голосов
/ 12 ноября 2018

как документация- Вам нужно создать файл, т. Е. 

// axios.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;

// *** При импортировании другого файла this- 

// Home.js
import axios from './axios.js';
...