別の約束の中で約束を解決する

Question

私は約束が新しく、2つの約束をどのように組み合わせるのかを掴むのに苦労します。私は約束を解決し、いくつかのタスクを行う機能を持っている：

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から、あなたが連鎖を維持することができます：loginでthen()機能が常に実行されること

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 
     // ... 
    }) 
} 

注意、呼び出しが成功したかどうかに関係なく。

Answer 2

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を返すことに注意してください。また、成功または失敗がどのように解決または拒否されるかに注目してください。