Axios "uncancel" api звонки - PullRequest
Новая
       8

Axios "uncancel" api звонки

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

У меня есть страницы, а внутри есть componentDidMount(). У нас есть вызовы API, однако если вы уйдете до того, как эти вызовы будут разрешены, вы получите ошибку React. Вы не можете setState на не смонтированном компоненте. Поэтому по этой причине я использовал Axios cancelToken для отмены вызовов API в componentWillUnmount(). Это работает, и вызовы API отменяются.

Однако, если вы уйдете, а затем вернетесь на ту же страницу, я вижу, что эти вызовы API все еще отменены и не разрешаются. Может быть, я неправильно реализовал cancelToken или есть способ "отменить" эти вызовы?

Вот коды и коробка: axios cancelToken пример

1 Ответ

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

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

const signal = CancelToken.source();

class Roster extends React.Component {
   ...........
}

Итак, удалил const signal, который объявлен перед классом Roster и включенв конструкторе компонента Roster.

Я изменил код компонента Roster, взятый из вашего примера кода, здесь: 

import React from "react";
import axios, { CancelToken } from "axios";
import request from "./api";

class Roster extends React.Component {
  constructor() {
    super();

    this.state = {
      data: null,
      error: null
    };
    this.signal = CancelToken.source();
  }

  componentDidMount() {
    request({ url: "google.com", method: "GET", cancelToken: this.signal })
      .then(data => this.setState({ data }))
      .catch(error => {
        if (axios.isCancel(error)) {
          this.setState({ error: "request cancelled" });
        }
      });
  }

  componentWillUnmount() {
    this.signal.cancel();
  }

  render() {
    const { data, error } = this.state;
    return (
      <div>
        <div>data: {data ? data : "no data"}</div>
        <div>error: {error ? error : "no error"}</div>
      </div>
    );
  }
}

export default Roster;
...