Question

我想链接两个API端点（登录然后获取用户）。我知道您可以使用.then链接vue-resource调用，如下例所示，该调用很有效：

function login (creds) {
  // First, call login endpoint
  this.$http.post(LOGIN_URL, creds).then(response => {
    // Handle login
    return userId
  }, response => {
    // Handle errors
  }).then((userId)=> {
    // Then, chain the get user endpoint
    this.$http.get(USER_URL + userId).then(response => {
      // Handle get user
      // Finally, redirect to user dashboard
    }, response => {
      // Handle errors
    })
  })
}

问题是我想为get用户端点创建一个单独的函数，以便重用和分离关注点。但是，当我创建它时，不能保证在我最后重定向到用户仪表板之前完成getUser功能（我不想在getUser内重定向）。

function getUser (userId) {
  this.$http.get(USER_URL + userId).then(response => {
    // Handle get user
  }, response => {
    // Handle errors
  })
}

function login (creds) {
  // First, call login endpoint
  this.$http.post(LOGIN_URL, creds).then(response => {
    // Handle login
    return userId
  }, response => {
    // Handle errors
  }).then((userId)=> {
    getUser(userId)  // Function not guaranteed to finish before proceeding
    // Should only proceed if getUser() is completed
    // Finally, redirect to user dashboard
  })
}

在第二个示例中，getUser函数永远不会在用户重定向到仪表板之前按时完成，这会导致登录过程中出现一些不一致。我相信我可以使用JS承诺，但我不确定在这种情况下实现方式。

如何使用函数链接vue-resource调用？

0 个答案: