Question

我是这种JavaScript编程的完全新手，我的一些问题可能看起来很愚蠢，你可能会扮演你的角色，但请耐心等待。

最近我正在阅读并实施有关Spring Boot and React的教程。在本教程中，作者使用了一个名为rest（package.json - “rest”：“^ 1.3.1”）的库，并提到它是一个基于Promies/A+的库。

我尝试实现教程但是我有其他类型的数据结构然后教程，更多的是树结构，所以后果我必须进行一次Rest调用并且使用第一次调用的解决方案我必须进行另一次Rest调用，在那里我有我无法解释的行为，调用看起来如下（als伪代码）。

client({method: 'GET', path: 'http://localhost:8080/service1'})
    .then(response =>{
       this.setState({result1 : response.entity._embedded.systems})
       return this.state.systems;
    })
    .then(function(results1) {
        {
            results1 && results1.map(
                function(result) {
                   client({method: 'GET', path: result._links.services.href })
                   .done( response => {
                      var results2 = response.entity._embedded.services
                      result.services = results2;
                    });
                }
            )
        }
    }
    );

现在我的问题这个2然后（..）块运行完全异步，实际上我正在使用React并且我调用this.setState（....）的那一刻反应呈现组件而只是第一次调用的结果是的，在'componentDidMount（）'上设置此代码时，我希望'render（）'仅在'componentDidMount（）'的执行结束时才会启动。

我试图在第一个'then（...）'块中进行第二次Rest Service调用，但这并未改变任何内容。

 client({method: 'GET', path: 'http://localhost:8080/service1'})
    .then(response =>{
       var tmp = response.entity._embedded.systems;
       tmp && tmp.map(
          function(result) {
              client({method: 'GET', path: result._links.services.href })
                 .done( response => {
                    var results2 = response.entity._embedded.services
                    result.services = results2;
                  });
               }
       this.setState({result1 : response.entity._embedded.systems})
    })

相同的行为，第一次休息呼叫的结果，但第二次没有任何结果。

最后，为了完成这项工作，我做了以下工作，

setTimeout(
   function() {
      this.setState({result1: tmp});
   }
)

但这不是正确的做法。

所以我的问题是，我做错了什么以及我能做得更好？

获得答案......

Answer 1

希望这会有所帮助。我评论了我的更改

client({method: 'GET', path: 'http://localhost:8080/service1'})
.then(response =>{
   this.setState({result1 : response.entity._embedded.systems})
   return this.state.systems;
})
.then(function(results1) {
        var promises = results1.map(
            function(result) {  // return the created promise
               return client({method: 'GET', path: result._links.services.href })
               .done( response => {
                  var results2 = response.entity._embedded.services
                  result.services = results2;
                });
            }
        )
        return Promise.all(promises) // return promiseCollection
    }
});

[编辑：] 您可以将promise数组传递给promise.all。它将等待所有承诺完成，然后调用其then（）方法。

理解Promises / A +以及Asynchronicity如何与Javascript一起使用

1 个答案: