Javascript에서 여러 API 호출하기

(모든 예제는 async/await 구문을 사용하는 브라우저 기본 가져오기 기능을 사용합니다)

Javascript에서 HTTP 요청(API 호출)을 만드는 것은 브라우저 기본fetch 기능, jQuery$.ajax 기능, 항상 인기 있는axios 라이브러리 및 끝없는 추가 옵션을 사용하는 것과 같은 여러 가지 방법으로 수행할 수 있습니다. React용 react-query 및 react-fetch와 같은 다양한 백엔드 및 프런트엔드 프레임워크와 함께 작동하도록 맞춤화된 옵션도 있습니다.

어떤 방법을 사용하든 일반적인 논리는 변경되지 않습니다.

약속을 반환하는 요청을 합니다

.

약속이 해결될 때까지 데이터를 사용할 수 없음

따라서 종종 단일 요청을 만드는 것은 이와 같은 것입니다.

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 호출을 만드는 경우 일반적으로 고려해야 할 두 가지 시나리오가 있습니다.

두 번의 독립적인 호출이지만 계속 진행하기 전에 두 데이터의 데이터가 필요합니다.

따라서 두 소스의 데이터가 필요할 수 있지만 두 요청이 완료될 때까지 후속 코드가 실행되는 것을 원하지 않습니다.

나는 대기를 사용하고 하나씩 할 수 있습니다.

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은 전달된 배열의 모든 약속이 해결될 때까지 해결되지 않는 약속을 반환합니다(두 번의 가져오기 호출). 따라서 두 가져오기 호출이 모두 시작되지만 개별 가져오기가 아닌 Promise.all에서 기능이 일시 중지됩니다. 이것은 두 요청 중 하나가 시간이 너무 오래 걸려 두 요청을 즉시 수행하도록 속도를 높이는 경우에 잘 작동합니다.

두 번째 요청은 이전 요청의 결과에 따라 다릅니다.

일부 API는 데이터를 여러 URL로 분할하므로 초기 호출에 대한 응답이 나머지 데이터를 찾을 수 있는 URL만 제공하는 경우가 많습니다. 예를 들어 Pokemon API은 포켓몬 배열을 제공하지만 각 포켓몬에는 해당 포켓몬에 대한 모든 데이터를 얻을 수 있는 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를 알고 필요에 따라 필요한 요청을 하십시오!