Отменить запрос в классе экземпляров Axios

Question

Я работаю с Redux- (сага) и функцией опроса.Мне нужно делать запрос каждые 1 сек.Мне нужно сделать новый запрос, когда я не получаю ответ от конечной точки.В этом случае я думаю, что мне нужно отменить предыдущий запрос и выполнить новую попытку xhr для конечной точки API.

Все мои запросы выполняются с помощью клиента Axios.У меня есть класс, где я разделяю все мои вызовы API.Я пробовал несколько примеров (см. Мой код ниже).И затем я вызываю функцию cancelRequest.

Может кто-нибудь помочь мне в правильном направлении?

Изучил эти вопросы и документацию, но ни одна из них не может мне помочь: (

Не могу отменить отправку запроса Axios через CancelToken https://redux -resource.js.org / recipes / cancelling-запросы

import { getCookie } from '......';

const CancelToken = Axios.CancelToken;
let cancel;

/**
 * Create a single axios client for the 
 * @type {AxiosInstance}
 */
const apiClient = apiUrl =>
  Axios.create({
    baseURL: apiUrl,
    cancelToken: new CancelToken(function executor(c) {
      // An executor function receives a cancel function as a parameter
      cancel = c;
    }),
  });

/**
 * The Api is initialised with a Axios client.
 */
class PinResetApi {
  constructor(client) {
    this.client = client;
  }

  /**
   * Reset pin controller
   */
  requestChangePin = () =>
    this.client(......url).request({
      method: 'GET',
      headers: {
        ...
      },
    });

  /**
   * Cancel reset pin API
   */
  cancelRequest = () => this.client.cancel();

  /**
   * Reset pin status controller
   * @param
   */
  requestChangePinStatus = transactionId =>
    this.client(.....url).request({
      method: 'GET',
      headers: {
        ...
      },

    });
}

const _api = new PinResetApi(apiClient);

export default _api;
export { PinResetApi };

Answer 1

Вы пытаетесь добавить токен при создании экземпляра axios один раз, но вам нужно создавать и обновлять токен каждый раз, когда вы отправляете запрос.Вы можете обновить свою упаковку apiClient следующим образом:

// ../services.js

const apiClient = baseURL => {
  const axiosInst = axios.create({
    baseURL,
  });

  axiosInst.defaults.headers.common['Content-Type'] = 'application/json';
  
  return (type = 'get') => {
    let call = null;
    return (url, data, config) => {
      if (call) {
        call.cancel('Only one request allowed!');
      }
      call = axios.CancelToken.source();
      const extConf = {
        cancelToken: call.token,
        ...config,
      };
      switch (type) {
        case 'request':
          return api[type](extConf);

        case 'get':
        case 'delete':
        case 'head':
          return api[type](url, extConf);

        default:
          return api[type](url, data, extConf);
      }
    };
  };
}

export const baseApi = apiClient('http://localhost:5000/api/')

А затем используйте его так:

class PinResetApi {
  constructor(client) {
    this.client = client('request');
  }

  /**
  * Reset pin controller
  */
  requestChangePin = () =>
    this.client({
      method: 'GET',
      headers: {
      ...
    }),
});