javascript - 如何从服务( native 脚本/firebase)中使用 Promise？

Question

我有一个 userService那叫firebase.login()返回 Promise<User> 类型的结果.它是这样调用的:

firebase.login( { config... 
})
.then (function (result) { /* use result */}, 
       function (error)  { /* use error */ });

在项目的其他地方，在 UI 组件中，我需要对登录结果(即成功或错误)使用react。我不想将任何路由或类似逻辑放入用户服务中，而是让其他组件控制接下来发生的事情。

这是怎么做到的？另一个组件如何对此使用react？

上面提到的组件是一个名为LoginPage的类.它有一个 Login应该启动 Firebase 登录的按钮。该按钮链接到 login() 中的函数(也称为 LoginPage )类。

XML:

<Button [text]="Sign in" class="submit-button" (tap)="login()"></Button>

登录.component.ts

login() {
   this._userService.login(this.user)
   .then(function (data) {
      /* go to next screen */
    });
}

以上显然是错误的，因为then子句将始终执行，无论登录成功或失败。

这是userService中的登录函数:

@Injectable()
export class UserService {


  login(user: User) {

    firebase.login({
      type: firebase.LoginType.PASSWORD,
      email: user.email,
      password: user.password
    })
    .then( function (result) {
       console.log("Successful Login! " + JSON.stringify(result));
       return result;
     }, function (error) {
       console.log(error);
       return error; 
    });
 }

Answer 1

UserService login 方法应该返回一个 promise 以使其可用于链接:

  login(user: User) {
    return firebase.login(...)...
  }

在上面的原始登录错误中已经被捕获，这留下了可以是结果或错误的解决方案的 promise 。

此处处理错误的首选方法是不捕获服务本身的错误。我们总是想知道登录请求是否成功。

  login(user: User) {

    return firebase.login(...)
    // second callback is optional if we don't need to log errors
    .then( function (result) { ... }, function (error) {
       console.log(error);
       return firebase.Promise.reject(error); 
    });
  }

这样一个错误可以(并且也应该，如果有未捕获的 promise ，Angular 2 将抛出一个错误)被捕获和处理:

login() {
   return this._userService.login(this.user)
   .then(function (data) {
      /* go to next screen */
   })
   .catch(function (error) { ... });
}

返回 promise 总是更可取，至少出于测试目的。