在 react-native 中取消获取请求

Cancel a fetch request in react-native(在 react-native 中取消获取请求)

问题描述

有什么方法可以中止 react-native 应用上的 fetch 请求?

Is there any way to abort a fetch request on react-native app ?

class MyComponent extends React.Component {
  state = { data: null };

  componentDidMount = () =>
    fetch('http://www.example.com')
      .then(data => this.setState({ data }))
      .catch(error => {
        throw error; 
      });

  cancelRequest = () => {
   //???
  };

  render = () => <div>{this.state.data ? this.state.data : 'loading'}</div>;
}

我尝试了 AbortController 类中的 abort 函数，但它不起作用！！

i tried the abort function from AbortController class but it's not working !!

...
abortController = new window.AbortController();

cancelRequest =  () => this.abortController.abort();

componentDidMount = () =>
        fetch('http://www.example.com', { signal: this.abortController.signal })
          ....

请帮忙！

推荐答案

最好的解决方案是使用 rxjs observables + axios/fetch 代替 promise，中止请求 => 取消订阅 observable:

the best solution is using rxjs observables + axios/fetch instead of promises, abort a request => unsubscribe an observable :

import Axios from "axios";
import {
    Observable
} from "rxjs";

export default class HomeScreen extends React.Component {
    subs = null;

    doStuff = () => {
        let observable$ = Observable.create(observer => {
            Axios.get('https://jsonplaceholder.typicode.com/todos', {}, {})
                .then(response => {
                    observer.next(response.data);
                    observer.complete();
                })
        });

        this.subs = observable$.subscribe({
            next: data => console.log('[data] => ', data),
            complete: data => console.log('[complete]'),
        });

    }

    cancel = () =>
        if (this.subs) this.subs.unsubscribe()

    componentWillUnmount() {
        if (this.subs) this.subs.unsubscribe();
    }

}

就是这样:)

这篇关于在 react-native 中取消获取请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！