Блог

Главная - Вопросы по программированию - Реагируйте на собственные запущенные параллельные Axios / запрос на извлечение

Реагируйте на собственные запущенные параллельные Axios / запрос на извлечение

#react-native #axios #fetch

Вопрос:

Фон:

У меня есть собственный проект React, который должен вызывать несколько API одновременно (но на разных экранах). Вот упрощенный код.

 callAPI(method, address, data, callback) {
    console.log("Calling... ", address)

    axios({
      method: method,
      url: address,
      headers: {
        Accept: "text/html",
        "Content-Type": "multipart/form-data"
      },
      data: data
    })
      .then(resp => {
        console.log("Done... ", address)  

        callback(resp.data)
      })
      .catch(err => {
        callback({
          statusCode: 500,
          errCode: "axios error",
          errmsg: err.message
        })
      })
}


this.callAPI('GET', firstURL, null, callback) // Say, this takes 10 seconds to finish
this.callAPI('GET', secondURL, null, callback) // This takes 1 second

В идеале API secondURL должен возвращать результат независимо от того, завершен ли API firstURL. Однако это не так. Он будет ждать завершения API firstURL, прежде чем возвращать результат secondURL.

Я попытался использовать Axios или fetch, но оба они ждут завершения другого вызова API.

Я в замешательстве, потому что я думал, что Axios и fetch основаны на обещаниях?

Вопрос:
Как выполнить два или более параллельных вызова API в React Native?

записка:
Я не могу использовать Обещание.все потому, что мне не нужно вызывать эти API вместе.

Обновить:

  • Я также выяснил, что если базовый URL API отличается, он будет работать так, как задумано. (например, один из них https://www.test.com а другой-это https://test.com)
  • Я почти уверен, что это проблема с React Native, если я попробую тот же код на jsfiddle.net, все работает так, как задумано

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

1. Если вы называете их оба друг за другом, и вы ничего не ждете, они должны работать параллельно. Если это не так, вам придется поделиться большим количеством кода.

2. @Evert Я обновил свой вопрос с помощью метода callAPI

3. Обычно код, которым вы делились, не ждал бы друг друга. Проблема должна заключаться в чем-то, не связанном с кодом, которым вы поделились.

4. @Evert дело в том, что, когда я вызываю оба API, вызов… строка выполняется одновременно. Однако дело Сделано.. очередь будет ждать друг друга. Я почти уверен, что это все коды, в которых есть проблема. Я не использую асинхронное ожидание в коде.

5. Отображаются ли оба запроса сразу на вкладке «Сеть» вашего браузера?

Ответ №1:

Как указал Эверт, это проблема с сервером. Сервер блокировал другие API, которые должны были выполняться одновременно.

Ответ №2:

Попробуйте изучить createAsyncThunk и обработать ваши сетевые запросы с помощью Redux. Это немного сложная тема, поэтому я бы изучил Redux самостоятельно, но в целом стратегия заключается в том, чтобы отправлять действия, соответствующие вашей функции callAPI, а затем сохранять их результаты в состоянии вашего приложения. Часть красоты AsyncThunks заключается в том, что у вас есть доступ к методам жизненного цикла асинхронных вызовов (ожидающих, выполненных, отклоненных).

Метки: