Выполнение нескольких вызовов API в Javascript

(во всех примерах используется встроенная в браузер функция fetch с использованием синтаксиса async/await)

Выполнение HTTP-запросов (вызовов API) в Javascript может быть сделано несколькими способами, например, с помощью встроенной в браузер функции fetch, функции jQuery $.ajax, популярной библиотеки axios и бесконечного множества других вариантов. Существуют также варианты, адаптированные для работы с различными бэкенд- и фронтенд-фреймворками, например react-query и react-fetch для React.

Какой бы метод вы ни использовали, общая логика не меняется:

• вы делаете запрос, который возвращает обещание
• данные не могут быть использованы, пока обещание не разрешится.

Поэтому часто один запрос выглядит примерно так.

async function getData (){

    const url = //... api url

    const response = await fetch(url) // make request

    const data = await response.json() // turn json response to javascript object

    // do stuff with the data, like updating state in a frontend framework
}

getData() // invoke the function defined above

Все достаточно просто, но что насчет нескольких вызовов API, то здесь обычно рассматриваются два сценария.

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

Возможно, мне нужны данные из двух источников, но я не хочу, чтобы последующий код выполнялся, пока не завершатся оба запроса.

Я мог бы просто использовать await и выполнять их по очереди.

async function getData(){
    const url1 = //...
    const url2 = //...

    const response1 = await fetch(url1)
    const data1 = await response1.json()

    const response2 = await fetch(url2)
    const data2 = await response1.json()

    // do what you want with data1 and data2 here
}

Это отлично работает, единственное неудобство заключается в том, что ключевое слово await приостанавливает выполнение функции, поэтому второй запрос не будет выполняться, пока не завершится первый. Мы можем запустить их оба одновременно, но убедиться, что функция не продолжится, пока они оба не завершатся, используя Promise.all().

async function getData(){
    const url1 = //...
    const url2 = //...

    const responses = await Promise.all([fetch(url1), fetch(url2)])

    const data1 = await responses[0].json()
    const data2 = await responses[1].json()

    // do what you want with data1 and data2 here
}

getData()

Promise.all возвращает обещание, которое не разрешится, пока не будут разрешены все обещания в переданном массиве (два вызова fetch). Таким образом, оба вызова выборки инициируются, но функция приостанавливается на Promise.all, а не на отдельных выборках. Это хорошо работает, если один из двух запросов занимает очень много времени, что ускорило бы работу, если бы оба запроса были сделаны сразу.

Мой второй запрос зависит от результатов предыдущего запроса.

Некоторые API разбивают данные на несколько ссылок, поэтому часто в ответе на первоначальный запрос просто даются ссылки, по которым можно найти остальные данные. Например, API Pokemon дает вам массив покемонов, но каждый покемон имеет только URL, по которому вы можете получить все данные об этом покемоне. Вы бы хотели, чтобы это выглядело примерно так.

async function getCharmandar(){
    const pokemonListUrl = "https://pokeapi.co/api/v2/pokemon"

    // get list of pokemon
    const response = await fetch(pokemonListUrl)
    const pokeList = await response.json()

    // find charmander in the array of pokemon
    const charmanderEntry = pokeList.find((poke) => poke.name === "charmandar")

    // request the charmandar data
    const response2 = await fetch(charmanderEntry.url)
    const charmander = await response2.json()

    // use the charmandar data as desired
}

getCharmander()

Все очень просто. Просто знайте свои API, читая документацию, и делайте необходимые запросы по мере необходимости!