为列表中的每个元素发出 api 请求

Question

我有这个功能：

updateCustomers = (input) => {

   //let urls = input;

   let urls = [{
    name: "localhost:8081",
    url: "http://localhost:8081"
},
{
    name: "localhost:8082",
    url: "http://localhost:8081"
},
{
    name: "localhost:8083",
    url: "http://localhost:8081"
}]

    const allRequests = urls.map(url => {

        let paramsNode = {
            customer: this.props.match.params.customer,
            environment: this.props.match.params.environment,
            action: 'check',
            node: url.name
        }

        sleep(2000).then(() => {
            this.gatewayService.manageServices(paramsNode).then((response) => {
                console.log("return " + response)
            })
        })

    })

    Promise.all(allRequests).then (function(results) {
        // API results in the results array here
        // processing can continue using the results of all three API requests
        console.log("HERE "+results)
    }, function(err) {
        // an error occurred, process the error here
    });
}

我在这里要做的是只确保 api 调用是有序的，并且在另一个完成时只执行一个 api 调用。 但是当我运行我的代码时，它并没有做我想要的。

这是我得到的照片：

HERE ,,

RestUtils.js:13 fetchJsonFromApi {"exitCode":"0"}

RestUtils.js:13 fetchJsonFromApi {"exitCode":"0"}

RestUtils.js:13 fetchJsonFromApi {"exitCode":"0"}

HERE 打印应该显示我的 api 订单的返回值，但它是未定义的 (HERE {"exitCode":"0"},{"exitCode":"0"},{"exitCode":"0"})

这是我的 API 调用：

 manageServices=(params)=>{

    let url = this.baseUrl;

    if(params.customer == null || params.environment == null) {
        throw "The customer or environment parameter cant be null.";
    }

    url += "/" + params.customer + "/" + params.environment +  "/"+params.node  +"/configurations/manageServices/" + params.action;

    url = encodeURI(url);

    return RestUtils.fetchJsonFromApi(url);

}


static fetchJsonFromApi(url, callback) {
    return fetch(url)
        .then(response => response.json())
        .then(json => {
            console.log("fetchJsonFromApi " + JSON.stringify(json))
            // making callback optional
            if (callback && typeof callback === "function") {
                callback(json);
            }
            return json;
        })
        .catch(error => {
            console.log(error)
        });
}

我只是想确保在对方通话结束后我会拨打电话。

不带休眠功能的更新：

Answer 1

添加以下 return 语句以将承诺链返回到您的 map() 数组

   return sleep(2000).then(() => {
 // ^^^^  returns sleep() promise to map array
      return this.gatewayService.manageServices(paramsNode).then((response) => {       
      // ^^^^^  returns promise to the sleep `then()`          
            console.log("return " + response)
            return response;
          // ^^^^^ resolves the inner then() with response object and 
          // resolves the above promises and gets passed to Promise.all()
        });
      });

我怀疑您的 sleep() 是试图解决实际上是由不正确/缺少returns 引起的排序问题。删除它并记录其他返回将正常工作

Answer 2

使用 async/await 循环调用，阻塞迭代直到每次调用完成：

const doCallsInOrder = async () => {
    const paramsNode_array = urls.map(url => ({
        customer: this.props.match.params.customer,
        environment: this.props.match.params.environment,
        action: 'check',
        node: url.name
    }))

    for (let i = 0; i < paramsNode_array.length; ++i) { // don't use a forEach
        const response = await this.gatewayService.manageServices(paramsNode_array[i])
        console.log("return " + response) 
    }
}
doCallsInOrder()