Как выполнить несколько вызовов API внутри componentDidMount с использованием выборки в React-Native?

#javascript #react-native

#javascript #react-native

Вопрос:

В моей функции 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. Предположим, если я хочу снова сделать тот же запрос в этой функции, как я могу это сделать?

Комментарии:

1. Сделайте это функцией и вызывайте ее несколько раз из componentDidMount?

2. вы можете использовать setInterval внутри componentDidiMount, чтобы вызвать api в желаемом интервале времени.

3. Я попробовал предложение от @DTul, и оно работает

4. @MohammedAshfaq, спасибо, но я не имею большого представления о setInterval. Не могли бы вы, пожалуйста, уточнить предложение.

Ответ №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();

  }
  

Ответ №2:

Вы также можете использовать Promise.all(). Что удобно при выполнении нескольких запросов. Кроме того, мы можем использовать вспомогательную библиотеку, такую как async, и использовать ее методы forEach, waterFall, series, parallel и т.д. В зависимости от потребностей проекта. Эти вещи делают наш код более читаемым и масштабируемым.