javascript - Fetch()2个JSON then()传递给函数

我正在尝试绘制图形。由于明显的原因，图形函数最后执行。

数据来源来自不同的网站。一个人的速度非常快（sourcex），而一个人的主持人却处在茫茫荒野中（看起来如此）（sourcey）。

因此，datax来自sourcex，datay来自sourcey。这两个json需要先返回，然后才能通过我的脚本运行。我尝试了以下和多种变体但无济于事。

我是否可以添加datay是datax的替代品。

请帮忙。

var datay;
var datax;

fetch(urlx)
.then(function(response) {
  return response.blob();
})
.then(function(myBlob) {
  res=>res.json()
})
.then((out)=>{
  datax=out;
}
.then(fetch(urly)).then(res=>res.json())
.then((out)=>{
 datay=out;
 runThroughScript(datax,datay);
})
.catch(err=>console.log(err));

最佳答案

我是否可以添加datay是datax的替代品。


它不在您提供的代码中，因此有两个答案：

如果datay确实依赖于datax

您将为此使用链条。您至少有两个选择：嵌套或Promise.all。

嵌套：

fetch(urlx)
.then(res => res.json())
.then(datax => {
    // Presumably use `datax` here for something
    return fetch(urly)
        .then(res => res.json())
        .then(datay => {
            runThroughScript(datax, datay);
        });
})
.catch(err=>console.log(err));

或使用Promise.all：

fetch(urlx)
.then(res => res.json())
.then(datax => {
    // Presumably use `datax` here for something
    return Promise.all([
        datax,
        fetch(urly).then(res => res.json())
    ]);
})
.then(([datax, datay]) => { // Note destructuring
    runThroughScript(datax, datay);
});
.catch(err=>console.log(err));

请注意，我们将不承诺传递给Promise.all作为第一个数组元素。很好，它将按原样传递给结果。

如问题所示，如果datay和datax是独立的

您将为此使用Promise.all。您向它传递了一系列的诺言，一旦它们中的任何一个拒绝，它就会被拒绝，或者以一系列的解决方案（按顺序）解决。看评论：

Promise.all([
    // The first fetch
    fetch(urlx)
    .then(res => res.json())
    ,
    // The second fetch runs in parallel
    fetch(urly)
    .then(res=>res.json())
])
.then(([datax, datay]) => {     // Note the destructured parameters
    runThroughScript(datax, datay);
})
.catch(err=>console.log(err));

（我删除了显然只是问题中的错误的斑点部分。）