在另一个 Promise 中解决 Promise

Question

我是 Promise 的新手，在掌握如何将两个 Promise 组合在一起时遇到了一些麻烦。我有一个函数可以解决一个承诺并执行一些任务：

loginService (context, credentials) {
  context.$http.post(LOGIN_URL, credentials, { emulateJSON: true}).then(response => {
    this.user.authenticated = true
    localStorage.setItem(TOKEN_STORAGE_NAME, response.body[TOKEN_NAME])
  }).catch(response => {
    context.error = response.body
  })
},

我想修改上面的代码，以便我可以执行以下操作：

login () {
  this.submitButtonLoading = true
  loginService(this, this.credentials).then(response => {
    this.submitButtonLoading = false
    // Do something else here.
  }).catch(response => {
    this.submitButtonLoading = false
    // Do something else here.
  })
}

处理这个问题的正确方法是什么？

Answer 1

要让 loginService 成为一个承诺，只需在函数内返回一个 Promise。确保在您的功能完成时调用resolve 和/或reject。

在您的示例中，您可以：

var loginService = function(context, credentials) {
  return new Promise( (resolve, reject) => {
    context.$http.post(LOGIN_URL, credentials, {emlateJSON: true})
      .then(response => {
        if (success) {
          this.user.authenticated = true
          resolve(this.user)
        } else {
          reject(new Error('Log in failed'))
        }
      })
      .catch(err => {
        reject(err)
      })
    })
 }

现在可以了。

请注意，整个函数实际上只是返回一个很大的 Promise。还要注意成功或失败是如何解决或拒绝的。

Answer 2

从loginService返回promise，然后你可以继续链接：

loginService (context, credentials) {
  return context.$http.post(LOGIN_URL, credentials, { emulateJSON: true})
    .then(response => {
      this.user.authenticated = true
      localStorage.setItem(TOKEN_STORAGE_NAME, response.body[TOKEN_NAME])
    })
    .catch(response => {
      context.error = response.body
    })
}

login () {
  this.submitButtonLoading = true
  loginService(this, this.credentials)
    .then(_ => {
      this.submitButtonLoading = false
      // ...
    })
}

注意login中的then()函数，无论调用成功与否，都会一直执行。