React-Nativeのフェッチを使用してComponentDidMount内で複数のAPI呼び出しを実行するにはどうすればよいですか?

SM Asif

componentDidMount関数で、AsyncStorageを呼び出して保存された値を取得してから、GETリクエストを作成し、次のようにデータをフェッチします。

componentDidMount() {
  AsyncStorage.getItem("token").then(value => {
    const url = 'my url';
    console.log('token:' + value)
    return fetch(url, {
        method: 'GET',
        headers: new Headers({
          'Content-Type': 'application/json',
          'token': 'abcd',
          'jwt': value
        })
      })
      .then((response) => response.json())
      .then((responseJson) => {

        this.setState({
          dataSource: responseJson,
          isLoading: false,
          getValue: value
        })
      })
      .catch((Error) => {
        console.log(Error)
      })
  })
}

次に、別のGETリクエストを行う必要があります。この関数で同じリクエストを再度実行したい場合、どうすればよいですか?

SM Asif

提案されたコメントから非常に簡単に解決しました。2つの異なる関数でAPI呼び出し部分を実行してから、以下のコードのようにComponentDidMount内でこれら2つの関数を呼び出しました-

 getFirstApiResposnse() {

  AsyncStorage.getItem("token").then(value => {
    const url = 'my url';
    console.log('token:'+ value)
   return fetch(url, {
    method: 'GET',
    headers: new Headers({
      'Content-Type' : 'application/json',
      'token': 'abcd',
      'jwt': value
    })
  })
   .then((response)=> response.json() )
  .then((responseJson) => {
    this.setState({
      dataSource: responseJson,
      isLoading: false,
      getValue: value

    })
  })
  .catch((Error) => {
    console.log(Error)
  });

  }

  )

};


getSecondApiResponse() {

  AsyncStorage.getItem("token").then(value => {
    const url = 'my url';
    console.log('token:'+ value)
   return fetch(url, {
    method: 'GET',
    headers: new Headers({
      'Content-Type' : 'application/json',
      'token': 'abcd',
      'jwt': value
    })
  })
   .then((response)=> response.json() )
  .then((responseJson) => {
   console.log('####:'+responseJson.cat_note)
    this.setState({

      isLoading: false,
      getValue: value,
    })
  })
  .catch((Error) => {
    console.log(Error)
  });

  }

  )

}

  componentDidMount() {

    this.getFirstApiResponse();
    this.getSecondApiResponse();

  }

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ