如何等待AJAX的success回调执行完成后再获取返回对象？

问题原因 #

AJAX属于异步操作，addUserLayerTreemail函数执行时不会等待AJAX请求及后续回调逻辑执行完成，会直接运行到函数结束，默认返回undefined。你将return userLayer写在success回调内部，这个返回值只会作用于success回调本身，无法被外层的addUserLayerTreemail函数捕获，所以赋值给myLayer的自然就是undefined。

解决方案 #

方案1：回调函数传值

给addUserLayerTreemail新增一个回调参数，在所有异步逻辑执行完成后调用回调，把处理好的userLayer传出去。
修改后的函数定义：

addUserLayerTreemail(userLayer, callback) {
  let configData = {"searchText": "search", "searchType" : "treemail"};
  $.ajax({
    url: "../apis/mySearch",
    method: 'GET',
    dataType: 'json',
    data : configData,
    success: response => {
      userLayer.query().where(response).run((data) => {
        userLayer.add(data);
        // 所有数据处理完成后调用回调传值
        callback(userLayer);
      });
    }
  });
}

调用方式：

// 所有需要用到myLayer的逻辑都放在回调函数内部
this.addUserLayerTreemail(userLayer, (myLayer) => {
  console.log(myLayer);
  // 后续业务逻辑写在这里
});

方案2：Promise封装（更推荐）

把整个异步逻辑封装成Promise返回，后续可以灵活使用then或者async/await取值。
修改后的函数定义：

addUserLayerTreemail(userLayer) {
  // 对外返回Promise实例
  return new Promise((resolve) => {
    let configData = {"searchText": "search", "searchType" : "treemail"};
    $.ajax({
      url: "../apis/mySearch",
      method: 'GET',
      dataType: 'json',
      data : configData,
      success: response => {
        userLayer.query().where(response).run((data) => {
          userLayer.add(data);
          // 异步处理完成后触发resolve传值
          resolve(userLayer);
        });
      }
    });
  })
}

调用方式1：用then接收结果

this.addUserLayerTreemail(userLayer).then(myLayer => {
  console.log(myLayer);
  // 后续业务逻辑写在这里
});

调用方式2：如果环境支持async/await，代码更简洁

// 注意：这段调用代码所在的外层函数必须加async关键字
async function yourBusinessFunction() {
  const myLayer = await this.addUserLayerTreemail(userLayer);
  console.log(myLayer);
  // 后续可以直接使用myLayer
}

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