在反应应用程序中与承诺链作斗争答案

【问题标题】：Struggle with chaining of promises in react application在反应应用程序中与承诺链作斗争
【发布时间】：2018-02-25 17:04:04
【问题描述】：

JavaScript, React - sending multiple simultaneous ajax calls 在承诺中挣扎。基本上我想链接调用，如果一个服务器调用完成，那么只做下一个调用，并收集来自端点 /pqr 在 makeServerCalls 中进行的调用的成功响应。

import Promise from 'bluebird';
import request from 'superagent';

// sends a post request to server 
const servercall2 = (args, response) => {
    const promise = new Promise((resolve, reject) => {

        const req = request
            .post(`${baseUrl}/def`)
            .send(args, response)
            .setAuthHeaders();

        req.endAsync()
            .then((res) => resolve(res))
            .catch((err) => reject(err));
    });

    return promise;
};

// sends a post request to server
const servercall1 = (args) => {
    const promise = new Promise((resolve, reject) => {

        const req = request
            .post(`${baseUrl}/abc`)
            .send(args)
            .setAuthHeaders();

        req.endAsync()
            .then((res) => resolve({res}))
            .catch((err) => reject(err));
    });

    return promise;
};


// function to send request to cgi server to execute actions from ui
async function makeServerCalls(args, length) {

    // convert args to two dimensional array, chunks of given length [[1,2,3], [4,5,6,], [7,8]]

    const batchedArgs = args.reduce((rows, key, index) => (index % length === 0 ? rows.push([key])
        : rows[rows.length - 1].push(key)) && rows, []);

    const responses = [];

    for (const batchArgs of batchedArgs) {
        responses.push(
            // wait for a chunk to complete, before firing the next chunk of calls
            await Promise.all(

                ***// Error, expected to return a value in arrow function???***
                batchArgs.map((args) => {
                    const req = request
                        .get(`${baseUrl}/pqr`)
                        .query(args)

                    // I want to collect response from above req at the end of all calls.
                    req.endAsync()
                        .then((response) =>servercall2(args,response))
                        .then((res) => res);
                })
            )
        );
    }

    // wait for all calls to finish
    return Promise.all(responses);
}

export function execute(args) {
    return (dispatch) => {

       servercall1(args)
           .then(makeServerCalls(args, 3))
           .then((responses) => {
                    const serverresponses = [].concat(...responses);
                    console.log(serverresponses);
            });
    };
}

错误：期望在箭头函数中返回一个值。我在这里做错了什么？

这是一个正确的链接还是可以优化？

如果中间有调用失败会怎样？

【问题讨论】：

领导赞赏

标签： javascript ajax reactjs promise

【解决方案1】：

您可以为此使用Async 库。无需重新发明轮子。

有一个瀑布函数，它采用一系列连续执行的函数。您可以将函数 1 的结果传递给函数 2 到函数 3，依此类推。一旦完整的瀑布执行，您将在回调中获得结果。您可以在文档中阅读更多相关信息。

【讨论】：