AngularJS中如何确保调用函数在API响应后返回结果？

你遇到的核心问题是JavaScript异步操作的执行顺序：testDataService返回的是一个Promise，then回调里的代码会在API请求完成后才执行，但你的return this.model是同步代码，会先于异步回调执行，所以返回的Model还没拿到API的数据。

下面给你两种常用的解决方案，都能确保return语句在API数据获取完成后才执行：

方案一：使用async/await（更直观易读） #

把getTestData标记为async方法，用await等待API请求完成，这样代码会阻塞到Promise resolve后再继续执行：

async getTestData(model) { 
  model.name = "practice"; 
  model.value = 2; 

  if(this.model.form.length>0 && this.model.form[0].entityName === 'test'){ 
    // 等待testDataService的Promise完成，拿到返回的列表
    const responseList = await this.testDataService(this.model); 
    model.class = responseList; 
  } 

  // 现在return的model已经包含API返回的数据了
  return this.model; 
}

调用方式： #

因为async方法本身返回的也是Promise，所以调用它的时候需要用await（在另一个async方法里）或者.then()来获取结果：

// 方式1：在async函数内使用await
const updatedModel = await this.getTestData(model);
// 这里可以直接使用updatedModel

// 方式2：用then回调处理
this.getTestData(model).then(updatedModel => {
  // 在这里处理更新后的model
});

方案二：返回Promise并链式调用 #

如果你不想用async/await，也可以让getTestData直接返回Promise，在API请求完成后再resolve更新后的Model：

getTestData(model) { 
  model.name = "practice"; 
  model.value = 2; 

  if(this.model.form.length>0 && this.model.form[0].entityName === 'test'){ 
    // 等待API请求完成后，更新model并返回
    return this.testDataService(this.model).then(responseList => { 
      model.class = responseList; 
      return model; 
    }); 
  } else {
    // 不满足if条件时，直接返回一个已resolve的Promise
    return Promise.resolve(model);
  }
}

调用方式： #

和方案一一样，需要通过.then()或者await获取返回值：

this.getTestData(model).then(updatedModel => {
  // 处理更新后的model
});

为什么原来的代码不行？ #

JavaScript的执行机制是先跑完所有同步代码，再处理异步任务（比如Promise的回调）。你原来的代码里，return this.model是同步代码，会在then回调执行前就执行，所以返回的Model还没被API数据更新。

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