如何不使用async/await，在异步函数中通过Promise实现异步逻辑？

改写后的原生Promise实现代码 #

fruit = 'apple';
data: any = {};
constructor(private http: HttpClient, private storage: Storage) {
}

// 移除async修饰符，直接返回Promise链实现同等异步效果
function(ex: string): Promise<{}> {
  // 入参有值时直接返回完成态Promise，无值时调用storage.get取存储值
  const getExPromise = ex ? Promise.resolve(ex) : this.storage.get('ex');
  
  return getExPromise.then(storedEx => {
    const finalEx = storedEx || 'apple';
    const path = `./exam/${finalEx}.json`;
    this.fruit = finalEx;
    this.storage.set('ex', this.fruit);

    return new Promise<{}>((resolve) => {
      this.http.get<{}>(path).subscribe(
        transition => {
          this.data = Object.assign({}, transition || {});
          resolve(this.data);
        },
        () => {
          this.data = {};
          resolve(this.data);
        }
      );
    });
  });
}

get(): string {
  return this.fruit;
}

核心改动说明 #

• 移除了函数的async修饰符，通过拼接Promise链保证执行顺序和原async/await版本完全一致
• 把原逻辑中await this.storage.get('ex')的异步等待改为.then链式调用，入参ex有值时用Promise.resolve包装保证分支逻辑统一
• 所有依赖ex取值的逻辑（路径拼接、storage存值、发起http请求）都移到.then回调内，异步执行顺序和原代码完全对齐
• 保留了原代码的http请求处理逻辑、异常降级规则、storage写入逻辑，未改动任何原有业务行为

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