如何在一个函数中同时使用来自两个不同端点的 json 数据？答案

【问题标题】：How to use json data from two different endpoints in a function at the same time?如何在一个函数中同时使用来自两个不同端点的 json 数据？
【发布时间】：2021-09-20 03:15:25
【问题描述】：

所以我想从两个不同的端点提取数据，并将它们同时发送到一个函数，作为所述函数的参数。

function otherFunc(jsonData1, jsondata2){
//do stuff
}



function getJsonData(url1,url2){
fetch(url1);
fetch(url2);
.then((response) => response.json())
.then((data) => otherFunc(data));
}
getJsonData(someUrl1, someOtherUrl2);

所以我知道如何将一组数据发送到一个函数，并且我知道如何发出多个 get 请求，但我不知道如何将两组 jsonData 发送到与 params 相同的函数。

提前致谢

【问题讨论】：

标签： javascript json api

【解决方案1】：

使用 async/await 更清晰

function otherFunc(jsonData1, jsonData2) {
  //do stuff
}

async function getJsonData(url1, url2) {
  const res1 = await fetch(url1);
  const res2 = await fetch(url2);

  const json1 = await res1.json();
  const json2 = await res2.json();

  otherFunc(json1, json2);
}

getJsonData(someUrl1, someOtherUrl2);

或者使用Promise.all()

function otherFunc(jsonData1, jsonData2) {
  //do stuff
}

async function getJsonData(url1, url2) {
  const resArr = await Promise.all(
    [url1, url2].map(url => fetch(url))
  );

  const [json1, json2] = await Promise.all(
    resArr.map(res => res.json())
  );

  otherFunc(json1, json2)
}

getJsonData(someUrl1, someOtherUrl2);

或者...

function otherFunc(jsonData1, jsonData2) {
  //do stuff
}

function getJsonData(url1, url2) {
  Promise.all([
    fetch(url1),
    fetch(url2)
  ]).then(responses => //map the returned promises to resolve json
    Promise.all(responses.map(res => res.json()))
  ).then(([json1, json2]) => // destructure resolved json
    otherFunc(json1, json2)
  ).catch(error =>
    // if there's an error, log it
    console.log(error));
}

getJsonData(someUrl1, someOtherUrl2);

【讨论】：

哇，这比我预期的要简单得多，非常感谢！

【解决方案2】：

function otherFunc(jsonData1, jsondata2){
//do stuff
}

function getJsonData(url1,url2){
    fetch(url1).then(res1 => {
        fetch(url2).then(res2 => {
            // here you have both responses ready
            otherFunc(res1.json(), res2.json());
        })
    })
}
getJsonData(someUrl1, someOtherUrl2);

使用异步等待的解决方案 2：

async function getData(url = '') {
  const response = await fetch(url);
  return response.json();
}

function otherFunc(jsonData1, jsondata2){
    //do stuff
}

async function getJsonData(url1,url2){
    const res1 = await getData(url1);
    const res2 = await getData(url2);
    
    otherFunc(res1, res2);
}

getJsonData(someUrl1, someOtherUrl2);

【讨论】：

【解决方案3】：

我会将这两个 URL 添加到 getJsonData 中的一个数组中，并通过它们循环将结果存储到一个数组中

function getJSONData(url1,url2){
  const urlArr = [url1, url2]
  const resultsArr = []
  for(let x = 0; x < arr.length){
    fetch(arr[x])
  }

  return resultsArr
}

【讨论】：

【解决方案4】：

受到Wait for multiple promises to finish 的启发，也许这可以工作并且避免任何级联等待。

function otherFunc(jsonData1, jsondata2){
//do stuff
}

function getJsonData(url1,url2){
    var json1, json2;

    const promise1 = fetch(url1).then(res1 => { json1 = res1.json() });
    const promise2 = = fetch(url2).then(res1 => { json2 = res1.json() });

    Promise.all([promise1, promise2]).then((values) => {
      otherFunc(values[0], values[1]);
      
      //Or if order of parmeter matter
      
      otherFunc(json1, json2);
    });
}


getJsonData(someUrl1, someOtherUrl2);

【讨论】：