Angular 4如何将Promise返回值赋值给全局变量？

嘿，这个问题我太熟了——Promise的异步特性经常让刚接触的开发者踩坑，别急，我结合你的Angular场景给你两种清晰的解决办法：

首先得明确：Promise是异步操作，你不能直接把getNumber()的返回值赋值给变量（那样拿到的是Promise对象，不是最终的数字），必须等它完成（resolve）后再赋值。

方法1：使用.then()链式调用 #

这是Promise最基础的用法，通过回调函数获取异步结果并赋值：

先看你的service.ts示例（模拟一个返回数字的Promise）：

// service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class NumberService {
  getNumber(): Promise<number> {
    // 模拟异步请求，比如调用后端接口
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const randomNum = Math.floor(Math.random() * 10); // 生成0-9的随机数
        resolve(randomNum);
        // 如果需要模拟错误，可以用 reject(new Error('获取数字失败'));
      }, 1000);
    });
  }
}

然后在home.component.ts的ngOnInit里调用并赋值：

// home.component.ts
import { Component, OnInit } from '@angular/core';
import { NumberService } from './service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
  isGreaterThanZero: boolean | undefined; // 组件级全局变量

  constructor(private numberService: NumberService) {}

  ngOnInit(): void {
    this.numberService.getNumber()
      .then((num) => {
        // 当Promise成功resolve后，在这里给变量赋值
        this.isGreaterThanZero = num > 0;
        console.log('赋值结果:', this.isGreaterThanZero);
      })
      .catch((error) => {
        // 必须处理异步操作的错误，避免控制台报错
        console.error('获取数字出错:', error);
        this.isGreaterThanZero = false; // 可以设置默认值或错误状态
      });
  }
}

方法2：使用async/await语法（更简洁易读） #

ES6+的async/await可以把异步代码写成同步的样子，Angular的ngOnInit支持改成异步函数：

// home.component.ts（async/await版本）
import { Component, OnInit } from '@angular/core';
import { NumberService } from './service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
  isGreaterThanZero: boolean | undefined;

  constructor(private numberService: NumberService) {}

  // 将ngOnInit声明为async函数
  async ngOnInit(): Promise<void> {
    try {
      // 等待Promise完成，拿到结果
      const num = await this.numberService.getNumber();
      this.isGreaterThanZero = num > 0;
      console.log('赋值结果:', this.isGreaterThanZero);
    } catch (error) {
      console.error('获取数字出错:', error);
      this.isGreaterThanZero = false;
    }
  }
}

额外注意事项 #

• 异步操作完成前，isGreaterThanZero是undefined，所以在模板里要处理这个状态，避免报错：

  <!-- home.component.html -->
  <div *ngIf="isGreaterThanZero !== undefined">
    数字是否大于0：{{ isGreaterThanZero ? '是' : '否' }}
  </div>
  <div *ngIf="isGreaterThanZero === undefined">加载中...</div>
  

• 不要尝试在同步代码里直接获取异步变量的值，比如在ngOnInit里console.log(this.isGreaterThanZero)会打印undefined，因为Promise还没完成。

内容的提问来源于stack exchange，提问作者bbusdriver