批量调用$http.post链式调用Promise出现previousResponse未定义如何解决

问题根源 #

你遇到的报错来自两个逻辑缺陷：

1. reduce传入的初始promise是Promise.resolve()，没有携带任何返回值，第一次进入.then()回调时，参数previousResponse自然为undefined，尝试访问undefined.data就会触发类型错误。
2. 现有逻辑会漏掉最后一个请求的返回结果：你是在处理完前一个请求的响应后才发起下一个请求，最后一次请求返回后没有对应的逻辑将其结果追加到数组、触发渲染。

修正方案 #

调整初始promise的返回值，增加对初始状态的判断，最后补一个回调处理最后一个请求的结果即可，修正后代码如下：

function callToHttpPost(request) {
    return $http.post('someurl', request);
}

function outerFunc($scope, someId) {
    let completeArray = [];
    let arrayOfRequests = getRequestInBatches();

    arrayOfRequests.reduce((promiseChain, currentRequest) => {
        return promiseChain.then((previousResponse) => {
            // 初始状态的空返回值不处理
            if (previousResponse) {
                completeArray.push.apply(completeArray, previousResponse.data);
                render($scope, completeArray, someId);
            }
            return callToHttpPost(currentRequest);
        });
    }, Promise.resolve(null))
    // 处理最后一批请求的返回结果
    .then((lastResponse) => {
        completeArray.push.apply(completeArray, lastResponse.data);
        render($scope, completeArray, someId);
    })
    .catch(e => errorHandler($scope, e, someId));
}

这样修改后就可以保证请求按顺序串行发起，每一批返回结果都会及时追加到数组触发渲染，不会出现参数undefined的问题，也不会漏掉最后一批数据。

内容的提问来源于stack exchange，提问作者AmeyaS