Question

我正在开发一个react js应用程序，我们正在使用基于promise的库axios来调用API。

现在，在应用程序的初始部分，用户获取登录页面，当登录成功时，我们联系不同的系统以检索有关用户的一些额外信息。

axios
    .get('url to authentication endpoint') // 1st call
    .then(response => {
        // if login is successful
        // 1. retrieve the user preferences like, on the customised screens what fields user wanted to see
        axios.get('user preference endpoint') // 2nd call
        // 2. send a request to one more external systems, which calculates what user can see and not based on LDAP role
        axios.get('role calculation endpoint') // 3rd call
    })
    .catch(error => {
    })

现在我可以看到我可以使用

了

axios.all（）

第二次和第三次通话，但是基于承诺的客户端，如何连接第一次和第二次通话？要检索用户首选项，我必须等待用户进行身份验证。

如何以基于承诺的方式链接此调用，而不是回调样式？

Answer 1

如the thread for this Github issue中提到的那样，axios()和axios.all()会返回Promise对象，无论您认为合适，都可以链接这些对象：

axios.get('/auth')
  .then(function(response) {
    return axios.all([ axios.get('/preferences'), axios.get('/roles') ]);
  })
  .then(function(responses) {
    const [
      preferencesResponse,
      rolesResponse
    ] = responses;
    // do more things
  })
  .catch(function(error) {
    console.log(error);
  });

Answer 2

Dan O的回答非常好，而且效果很好，但使用.img-responsive可读性很高，尽管它也在使用承诺下的承诺

async/await

虽然这是一回事，但在我非常主观的意见中“感觉”更具可读性

React JS＆amp; Axios链接承诺

2 个答案: