Остановить запросы Axios об изменении маршрута с Mobx State Tree? - PullRequest
Новая
       21

Остановить запросы Axios об изменении маршрута с Mobx State Tree?

0 голосов
/ 11 июня 2019

Я использую axios, и я заметил, что кто-то идет к маршруту А, а затем быстро нажимает кнопку для маршрута Б, запросы к маршруту А все еще будут выполняться, и могут получиться странные результаты.

Я делаючто-то вроде этого 

getAllTaxRates: flow(function*() {
  try {

      const response = yield self.rootStore().axios.get('/get');

      applySnapshot(self.taxRates, response.data);

  } catch (error) {
    throw error;
  }
}),

Так что я не уверен, что лучший способ отменить эти запросы.

Ответы [ 2 ]

0 голосов
/ 12 июня 2019

Вы можете использовать токен отмены , предоставленный axios, для отмены ожидающих запросов в начале нового (вам придется создавать новый токен каждый раз, как мне кажется).

Однако я помню, что у меня было несколько проблем с этим методом (он заморозил все мое приложение), и я в итоге использовал Node-Fetch и AbortController, который отлично подходит для моего использования.(Как видно из в этом ответе )

РЕДАКТИРОВАТЬ: Вот примерно как я это делаю, обратите внимание, что моя функция для запросов является асинхронной (используя Context API, но вы должны быть в состоянии сделать то же самое с Mobx) 

import React from 'react';
import Context from './Context';
import fetch from 'node-fetch';

class Provider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      controller: new AbortController(),
    };
    this.queryAll = this.queryAll.bind(this);
    this.abortAllRequest = this.abortAllRequest.bind(this);
  }

  abortAllRequest() {
    this.state.controller.abort();
    this.setState({
      isLoading: false,
      controller: new AbortController(),
    });
  }

  async queryAll(eans) {
    if (this.state.isLoading) {
      await this.abortAllRequest();
    }

    const signal = this.state.controller.signal;

    const result = await fetch(`/SomUrl/`, {
      method: 'get',
      signal: signal,
    });
  }

  render() {
    return (
      <Context.Provider value={{
        state: this.state,
        queryAll: this.queryAll,
        abortAllRequest: this.abortAllRequest,
      }}>
        {this.props.children}
      </Context.Provider>
    );
  }
}

export default Provider;
0 голосов
/ 12 июня 2019

Я столкнулся с той же проблемой здесь. На самом деле не совсем так. Просто моя архитектура подвержена такой же проблеме ( теперь, когда я думаю об этом ). Я думаю, что мы должны сделать, это сохранить состояние маршрутизатора (, возможно, в энергозависимое состояние ) и проконсультироваться с ним, прежде чем пытаться запросить какой-либо маршрут. Затем, если необходимо, мы можем либо остановить изменение маршрута, либо отменить предыдущий запрос (, и запросы следует отправлять с помощью отменяемой утилиты ), прежде чем создавать новый.

Потенциально вы также можете добавить промежуточное программное обеспечение , которое может отменить асинхронное действие на любом этапе. Таким образом, вы можете обратиться к вышеупомянутому флагу на каждом этапе действия и выручить, если обнаружите конфликт. Но это не остановит сам запрос.

Третий вариант, который, я думаю, самый лучший, заключается в создании небольшого изменчивого состояния для каждого запроса с состоянием и ссылкой на фактический запрос, чтобы он мог автоматически отменить его при уничтожении. И уничтожение будет запущено, как только вы назначите новый запрос тому же узлу в дереве.

...