了解 Promises/A+ 以及异步性如何与 Javascript 一起使用

Question

我是这种 JavaScript 编程的新手，我的一些问题对你来说可能看起来很愚蠢，你可能会视而不见，但请多多包涵。

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

我尝试实现本教程，但我有其他类型的数据结构，然后是教程，更多的是树结构，因此我必须进行一次 Rest 调用，并且通过第一次调用的解决方案，我必须进行另一个 Rest 调用，那里有我无法解释的行为，调用如下所示（作为伪代码）。

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;
                    });
                }
            )
        }
    }
    );

现在我的问题 this 2 then(..) 块完全异步运行，实际上我正在使用 React 并且当我调用 this.setState(..) react 时会渲染组件，而只有第一次调用的结果在那里，在“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})
    })

相同的行为，第一次 Rest 调用的结果，但第二次没有。

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

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() 方法。