Angular中如何在收到服务器响应前阻止后续代码执行？

你遇到的问题本质是异步操作的同步返回问题：S3的上传是网络IO异步操作，不会阻塞主线程执行，原来的写法在发起上传请求后就立刻返回了初始的false值，回调里修改状态的时候，组件的同步逻辑已经执行完毕了。

1. 修改S3上传服务代码 #

服务的上传方法需要返回Promise<boolean>类型，通过async/await处理异步结果，不要用全局属性存储单次上传的状态，避免并发上传时状态冲突：

// upload.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import S3 from 'aws-sdk/clients/s3';

@Injectable({ providedIn: 'root' })
export class S3FileUploadService {
  constructor(private http: HttpClient) { }

  async uploadFile(file: File, bucketName: string, fileName: string): Promise<boolean> {
    const contentType = file.type;
    const bucket = new S3({
      accessKeyId: '<accessKeyId>',
      secretAccessKey: '<secretAccessKey>',
      region: '<region>'
    });
    const params = {
      Bucket: bucketName,
      Key: fileName,
      Body: file,
      ContentType: contentType
    };

    try {
      await bucket.putObject(params).promise();
      return true;
    } catch (err) {
      console.error('S3上传失败：', err);
      return false;
    }
  }
}

2. 修改组件调用代码 #

所有依赖上传结果的逻辑，必须放在异步回调之后执行，推荐用async/await写法更易读：

// upload.component.ts
// 调用上传的方法需要加async修饰符
async handleFileUpload(file: File) {
  // 等待上传操作完成再获取结果
  const isUploadSuccess = await this.uploadService.uploadFile(file, this.bucket, file.name);
  if (isUploadSuccess) {
    // 这里放上传成功后的后续业务逻辑
    console.log('文件上传成功，执行后续操作');
  } else {
    console.log('文件上传失败，请重试');
  }
}

如果偏好Promise的then写法也可以用如下实现：

// upload.component.ts
handleFileUpload(file: File) {
  this.uploadService.uploadFile(file, this.bucket, file.name)
    .then(isUploadSuccess => {
      if (isUploadSuccess) {
        // 上传成功后续逻辑
        console.log('文件上传成功，执行后续操作');
      } else {
        console.log('文件上传失败，请重试');
      }
    });
}

• 不要尝试同步获取异步操作的结果，所有依赖上传状态的逻辑必须放在await之后或者then的回调函数内
• 不要用服务的全局属性存储单次上传的结果，否则并发上传时会出现状态互相覆盖的问题
• 使用await的外层函数必须加async修饰符，否则会触发语法错误

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