在Axios实例类中取消请求

时间:2019-02-12 09:52:05

标签: javascript reactjs redux axios es6-class

我正在使用Redux-(传奇)和轮询功能。我需要每1秒发送一次请求。当我没有收到来自端点的响应时,我需要执行一个新请求。在这种情况下,我想我需要取消之前的请求,并尝试对api端点进行新的xhr尝试。

我所有的请求都是通过Axios客户端完成的。我有一堂课,我分开了所有的api调用。我尝试了多个示例(请参见下面的代码)。然后我调用cancelRequest函数。

有人可以帮助我朝正确的方向发展吗?

研究了这些问题和axios文档,但没有一个可以帮助我:(

Cant cancel Axios post request via CancelToken https://redux-resource.js.org/recipes/canceling-requests

&session_state=...

1 个答案:

答案 0 :(得分:0)

您试图在一次创建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: {
      ...
    }),
});