在多个解析期间输出 Promise 的值

Question

我正在从 d3.csv 加载一个承诺，然后在后续的 .then 调用中对返回的数组进行多项更改。

我需要在每次更改之前将数组的状态输出到 html (Angular 2)，我可以使用（变量 | 异步）执行此操作，但它将更新为每次更改，我需要输出每次更改前的状态。

我试图克隆承诺，但所有克隆都指向同一个承诺。任何变量都超出了更改的范围，并且无法访问父范围。

data = d3.csv promise
data.then(methodB()). // HTML | async Output Required of Array before changes
then(methodB()) // HTML | async Output Required of Array before changes
etc..
etc..
etc..
(There are around 15 methods applied to the data as it is munched and analyzed)

实现此目标的最佳方法是什么？

Answer 1

假设：

您有一个名为 csvPromise 的开始承诺，它提供数组
要应用的方法有methodA、methodB、methodC等，每个都接受Array
每种方法要么 returns 输入数组的变化，要么通过 Promise
对数组的更改是累积的，方法对方法
你有一个同步函数output()，它将接受原始数组和每个变异

那么像这样的模式就可以完成工作:

csvPromise
.then(function(arr) {
    output(arr); // observe initial array as delivered by csvPromise
    return methodA(arr);
})
.then(function(arr) {
    output(arr); // observe array after application of methodA
    return methodB(arr);
})
.then(function(arr) {
    output(arr); // observe array after application of methodB 
    return methodC(arr);
})
etc..
etc..
etc..
.then(function(arr) {
    output(arr); // observe array after application of final method
}).catch(function(error) {
    console.log(error); // any error thrown from anywhere in the chain will arrive here 
});

可以通过如下方式动态构建链来程序化该模式：

var methods = [methodA, methodB, methodC, ...]; // list of methods (uncalled at this point)
return methods.reduce(function(promise, method) {
    return promise.then(function(arr) {
        output(arr); // observe result of previous stage
        return method(arr);
    });
}, csvPromise)
.then(function(arr) {
    output(arr); // observe array after application of final method
}).catch(function(error) {
    console.log(error); // any error thrown from anywhere in the chain will arrive here 
});

最有可能违反假设的是 output() 本身是异步，在这种情况下：

var methods = [methodA, methodB, methodC, ...]; // list of methods
return methods.reduce(function(promise, method) {
    return promise.then(function(arr) {
        return output(arr).then(function() {
            return method(arr);
        });
    });
}, csvPromise)
.then(function(arr) {
    output(arr); // observe array after application of final method
}).catch(function(error) {
    console.log(error); // any error thrown from anywhere in the chain will arrive here 
});

在多个解析期间输出 Promise 的值

Outputting Value of Promise during multiple parses

promise

d3.js

angular2-services