Question

我需要根据前一次调用的结果调用多个端点。

return http.get('url1')
  .then(response1 => {
     return response1.data
  })
  .then(data => {
    http.get('url2' + data) 
      .then(response2 => {
        return response2.data 
      }) // etc ... until the 'nth url'
  })

它可以得到很好的嵌套。有没有办法压扁这个，也许使用发电机？

Answer 1

承诺是为了展平：

return http.get('url1').then(response1 => {
     return response1.data
  }).then(data => {
     return http.get('url2' + data);
  }).then(response2 => {
     return http.get('url3' + response2.data);
  }) // ...etc

如果您的JavaScript引擎支持async / await，则可以在async函数中缩短并提高可读性：

async function demo() {
    const response1 = await http.get('url1');
    const response2 = await http.get('url2' + response1.data);
    const response3 = await http.get('url3' + response2.data);
    // ...
    return responseN;
}

...然后打电话给：

demo().then(response => {
    console.log(response);
    // ...etc
});

Answer 2

我不知道有一个很好的解决方案可以避免then()串，但你不需要嵌套：

return http.get('url1')
.then(response1 => response1.data)
.then(data => http.get('url2' + data))
.then(response2 => response2.data ) 
// etc ... until the 'nth url'

如果模式在每种情况下都相同，您可以传递网址列表并使用reduce()

Answer 3

通过在有新承诺时返回来展平承诺链。但是，如果您有非承诺值，请不要。这只是一项微任务的浪费。只需直接使用该值：

return http.get('url1')
  .then(response => http.get('url2' + response.data)) 
  .then(response => doSomethingWith(response.data))

要获得简单的data变量名称，请改用destructuring：

return http.get('url1')
  .then(({data}) => http.get('url2' + data)) 
  .then(({data}) => doSomethingWith(data))

调用多个API而不需要太多嵌套

3 个答案: