在另一个承诺中解决承诺

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

Return 来自 loginService 的承诺，然后你可以继续链接：

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()函数无论调用成功与否，都会一直执行

Answer 2

要使 loginService 成为一个承诺，只需 return 一个 Promise 函数内部。确保在函数完成时调用 resolve and/or 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)
      })
    })
 }

现在是then-able。

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

在另一个承诺中解决承诺

Resolve promise inside another promise

javascript

promise

es6-promise

vue-resource

vuejs2