javascript - 如何在 javascript 中处理两个 API 调用？

Question

我对javascript很陌生，我正在使用jeopardy api来解决危险问题，这就是我所拥有的

var request = new XMLHttpRequest();

request.open('GET', 'http://jservice.io/api/categories?count=6', true)
var arr = []
var clues = []
request.onload = function() {
    var data = JSON.parse(this.response)
    data.forEach(cat => {
        console.log(cat)
        arr.push(cat.id)
    })
    for (var i = 0; i < 6; i++) {
        var base = "http://jservice.io/api/category?id="
        var clueRequest = base.concat(arr[i])
        console.log(clues.push(clueRequest)) 
    }  
    
}

request.send()

问题是我现在想进入我的线索列表并请求这些 json，因为它们包含问题。我该怎么做呢？

标签： javascript

Answer 1

这是一个如何一次执行多个数据调用的示例。

在这种情况下，我使用了带有 async/await 功能的 fetch API。

我从 jeopardy api 获取数据，然后映射数据以设置一组 fetch promise。然后我用await Promise.all()等待数据返回。在这一点上，我们有一个线索对象数组。

async function getData() {

  const data = await (await fetch('https://jservice.io/api/categories?count=6')).json()
  
  const cluePromises = data.map(clue => fetch(`https://jservice.io/api/category?id=${clue.id}`).then(request => request.json()));
  const clues = await Promise.all(cluePromises);
  
  console.log(data);
  console.log(clues);
}
getData();