理解 d3 中的 Promise答案

【问题标题】：Understand promises in d3理解 d3 中的 Promise
【发布时间】：2019-08-07 02:08:19
【问题描述】：

我才刚刚开始理解承诺。我知道您可以使用以下内容来处理 d3.csv('https://url.com').then(d => handle(d)) 但是，我遇到了下面的示例，我很难理解每个部分的作用。谁能解释一下？

编辑：我知道Promise.all 确实“传递了一组承诺，并且只有在所有这些承诺都已解决或其中一个被拒绝时才会触发一个函数。”

这是取自 D3.Js in Action 中的Listing 7.4. The adjacency matrix function 的示例。

var PromiseWrapper = d => new Promise(resolve => d3.csv(d, p => resolve(p))); // part1


      Promise
        .all([
          PromiseWrapper("../data/nodelist.csv"),
          PromiseWrapper("../data/edgelist.csv")
        ]) //part2
        .then(resolve => {
          createAdjacencyMatrix(resolve[0], resolve[1]);
        }); //part3

编辑：要合并 d3v5 d3-fetch，以下是否正确？

//ver1
const promise1 = d3.csv('../data/nodelist.csv')
const promise2 = d3.csv('../data/nodelist.csv')

Promise.all([promise1, promise2]).then(resolve => 
   createAdjacencyMatrix(resolve[0], resolve[1]));

或者我需要执行以下操作？

//ver2
const promise1 = d3.csv('../data/nodelist.csv').then(d => d)
const promise2 = d3.csv('../data/nodelist.csv').then(d => d) 

Promise.all([promise1, promise2]).then(resolve => 
   createAdjacencyMatrix(resolve[0], resolve[1]));

ver1 和 ver2 有什么区别？

【问题讨论】：

PromiseWrapper 返回一个处理 csv 文件并使用其值解析的新承诺，它似乎只是一个帮助函数，使代码更清晰。 Promise.all 接受一个 promise 数组，然后将解析的数据作为数组传递给 then。所以这个 sn-p 将处理所有 csv 文件，然后用结果数据创建一个邻接矩阵。如果您想进一步阅读 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
How does promise.all work?的可能重复
@CharlieH 我更新了我的问题。这个问题的重点可能与链接有点不同。
PromiseWrapper 函数完全没有必要，因为 d3.csv 已经返回了一个承诺。话虽如此，从问题中的 3 个 sn-ps 来看，只有“ver1”是正确的。
建议的重复目标是不够的，因为 d3.csv 在此问题中起着基础作用。

标签： javascript d3.js es6-promise

【解决方案1】：

PromiseWrapper("../data/nodelist.csv") 返回一个承诺。

Promise.all 将所有这些承诺放在一个数组中，并返回一个承诺，当所有承诺都解决时，该承诺将被解决。

var promise1 = new Promise(resolve => {
   setTimeout(() => resolve(), 1000) });
   
 var promise2 = new Promise(resolve => {
   setTimeout(() => resolve(), 5000) });
   
   
 Promise.all([promise1, promise2]).then(() => {
    console.log('All promises are resolved');
 })

【讨论】：