web-dev-qa-db-ja.com

反応ネイティブでフェッチ要求をキャンセルする

反応ネイティブアプリでフェッチ要求を中止する方法はありますか？

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>;
}

abortクラスのAbortController関数を試しましたが、機能しません!!

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

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

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

助けてください！

androidreact-nativefetch
6
AHméd Net

私は実際にこの主題についてかなり書きました。 [〜＃〜] old [〜＃〜] AbortControllerの欠如に関する最初の問題はReactにあります。私が開いたネイティブ はこちら

RN 0.60.0にサポートが追加されましたそして、私のブログ にこれに関する記事 と を見つけることができる別の記事がありますReact Nativeでも、中止可能なリクエスト（など）の作成を開始するための簡単なコード を提供します。また、サポートされていない環境（たとえば、RN <0.60）の小さなポリフィルも実装します。

1
Giacomo Cerquone

これを実際に実現するには、このポリフィルをインストールします abortcontroller-polyfill リクエストをキャンセルする簡単な例を次に示します。

import React from 'react';
import { Button, View, Text } from 'react-native';
import 'abortcontroller-polyfill';

export default class HomeScreen extends React.Component {
  state = { todos: [] };

  controller = new AbortController();

  doStuff = () => {
    fetch('https://jsonplaceholder.typicode.com/todos',{
      signal: this.controller.signal
    })
    .then(res => res.json())
    .then(todos => {
      alert('done');
      this.setState({ todos })
    })
    .catch(e => alert(e.message));
    alert('calling cancel');
    this.controller.abort()
  }


  render(){
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Button title="Do stuff" onPress={() => { this.doStuff(); }} /> 
      </View>
    )
  }
}

したがって、この例では基本的に、「doStuff」ボタンをクリックすると、リクエストはすぐにキャンセルされ、「完了」アラートを受け取ることはありません。確かに動作します。これらの行をコメントアウトして、もう一度ボタンをクリックしてください。

alert('calling cancel');
this.controller.abort()

今回は「完了」アラートが表示されます。

これは、react nativeのfetchを使用してリクエストをキャンセルできる簡単な例です。ご自分のユースケースに自由に採用してください。

これは、snakedexpoのデモへのリンクです https://snack.expo.io/@mazinoukah/fetch-cancel-request

それが役に立てば幸い ：）

0
Mazino S Ukah