0

Boa noite. Estou com dúvidas sobre tal método do ciclo de vida do React e estou fazendo testes. Um deles, é cancelar uma requisição fetch, no entanto, não estou conseguindo. O console.log aparece, mas o cancelamento da requisição não funciona. Na minha aplicação, ao clicar no botão, acontece uma troca de componentes e ocorre uma requisição. Aqui vai meu código:

const abortController = new AbortController()

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      load: true
    };
  }

  toogle = () => {
    const { load } = this.state;

    this.setState({ load: !load });
  };

  render(){
    const { load } = this.state
    return(
      <>
        {
          load?
          <>
            <h1>Principal</h1>
            <button onClick={this.toogle}>Clique</button>
          </>:
          <Teste click={this.toogle}/>
        }
      </>
    )
  }
}

class Teste extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log("fui montado");

    fetch('https://pokeapi.co/api/v2/evolution-chain/?limit=6&offset=0',{
      signal: abortController.signal
    }).then(res => res.json()).then(res => console.log(res))
  }

  componentWillUnmount() {
    console.log("fui desmontado");
    abortController.abort()
  }

  render(){
    return(
      <>
        <h1>Requisição</h1>
        <button onClick={this.props.click}>Clique</button>
      </>
    )
  }
}

Alguém tem alguma ideia do que possa estar acontecendo?

Desde já, agradeço a atenção!

3
  • 1
    Talvez tenha que criar aquela variável dentro do componente?
    – novic
    Commented 2/02/2020 às 0:28
  • @ThalesMaia, eu penso que a complexidade que você vai introduzir só para cancelar a requisição AJAX não vale a pena (nesse tipo de requisição). Não seria melhor que você simplesmente impedisse o setState após a requisição se o componente estiver sido desmontado? Commented 2/02/2020 às 2:04
  • Sim sim, mas eu li um artigo no próprio site do React que diz que isso é considerado anti pattern. E também na própria documentação diz que se deve cancelar a requisição no ComponentWillUnmount, ou não é uma regra para todos os casos? Commented 2/02/2020 às 13:11

1 Resposta 1

0

O problema é que o request é uma promisse que não é cancelável. Não tem uma referência específica ao seu request que cancela a promisse que você fez em cima.

Uma forma de fazer seria declarar a promisse do request em uma variável...e depois cancelar usando um método dessa variável.

Como por exemplo:

const makeCancelable = (promise) => {
    let hasCanceled_ = false;

    const wrappedPromise = new Promise((resolve, reject) => {
        promise.then(
            val => hasCanceled_ ? reject({isCanceled: true}) : resolve(val),
            error => hasCanceled_ ? reject({isCanceled: true}) : reject(error)
        );
    });

    return {
        promise: wrappedPromise,
        cancel() {
            hasCanceled_ = true;
        },
    };
};

const cancelablePromise = makeCancelable(fetch('LINK HERE'));

constructor(props){
    super(props);
    this.state = {
        isLoading: true,
        dataSource: [{
            name: 'loading...',
            id: 'loading',
        }]
    }
}

componentDidMount(){
    cancelablePromise.
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState({
                isLoading: false,
                dataSource: responseJson,
            }, () => {

            });
        })
        .catch((error) =>{
            console.error(error);
        });
}

componentWillUnmount() {
    cancelablePromise.cancel();
}

Mas essa abordagem tem muito código feito a toa (boilerplate) e é muito verbosa.

Uma recomendação seria tentar utilizar Hooks. Com hooks a abordagem de timing de requests feitos ou cancelados é em relação a propriedades.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .