离子 3/打字稿承诺

Question

我正在尝试使用 Promise 从 Web 服务获取数据

  login(){
var obj = {email:'WHATEVER', firstname:''};
var b = this.getUsers().then(data => {
  this.films = data;
  obj = this.films.customer_info;
  console.log('inside:' + obj.firstname);
});
console.log('outside:' + obj.firstname);

}

我的预期结果：

外部：南南 login.ts:51 内部：南南
login.ts:48

我的实际结果：

外部：login.ts:51 内部：Nam Nam
login.ts:48

谁能告诉我如何解决这个问题？谢谢

Answer 1

您的预期结果是不可能的，因为您断言您希望一个值（将异步获取）同步可用。

让我们更详细地研究一下...这是一个简短但完整的问题示例：

class Example {
  private films: any;

  login() {
    var obj = { email: 'WHATEVER', firstname: '' };
    var b = this.getUsers().then(data => {
      this.films = data;
      obj = this.films.customer_info;
      console.log('inside:' + obj.firstname);
    });
    console.log('outside:' + obj.firstname);
  }

  getUsers() {
    return new Promise((resolve, reject) => {
      window.setTimeout(() => {
        console.log('Result obtainined... for example from a service');
        resolve({ customer_info: { firstname: 'Fenton' } });
      }, 1000);
    })
  }
}

const example = new Example();

example.login();

这个程序的输出是：

outside:
Result obtainined... for example from a service
inside:Fenton

如您所见，then 处理程序之外的语句在 Promise 解析之前执行。如果您正在调用服务，则这行代码将在服务器响应之前运行。

这实际上就是 Promise 的全部意义所在 - 这就是它在您的 then 处理程序内部工作的原因。

如果您的代码依赖于 login 完成，您可以从 login 方法返回一个承诺。根据上面的例子，你可以使用：

  login(): Promise<{ firstname: string}> {
    return new Promise((resolve, reject) => {
      this.getUsers().then(data => {
        this.films = data;
        resolve(this.films.customer_info);
      });
    });
  }

登录完成后，客户信息可用：

example.login()
    .then((customer) => console.log(customer.firstname));