Question

在我的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请求。假设我要在此功能中再次发出相同的请求，该怎么办？

Answer 1

我从建议的注释中很轻松地解决了它。我做了两个不同函数的API调用部分，然后像下面的代码一样在ComponentDidMount内部调用了这两个函数-

 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();

  }

Answer 2

您还可以使用Promise.all（）。方便处理多个请求。另外，我们可以使用帮助程序库（例如异步程序），并根据项目需要使用其forEach，waterFall，系列，并行等方法。这些东西使我们的代码更具可读性和可伸缩性。

如何在React-Native中使用访存在ComponentDidMount内部执行多个API调用？

2 个答案: