如何调用含异步请求的getDroplets函数并处理返回数据？

首先得明确问题根源：你目前的getRequest和getDroplets都是基于回调函数实现的异步逻辑，但async/await只对返回Promise的函数生效，所以直接用await调用getDroplets是拿不到结果的。我们需要把回调式的异步逻辑改成Promise风格，这样才能顺畅地用async/await处理。

第一步：改造getRequest为Promise版本 #

把原来的回调式ajax改成返回Promise，这样我们就能用.then()或者await来处理结果：

function getRequest(url, api_key) {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: url,
      contentType: 'application/json',
      type: 'get',
      beforeSend: function(xhr){
        xhr.setRequestHeader('Authorization', 'Bearer ' + api_key);
      },
      success: function(response) {
        resolve(response); // 成功时把结果传递出去
      },
      error: function(error) {
        console.log(error);
        document.getElementById("droplets").textContent = error;
        reject(error); // 失败时抛出错误
      }
    });
  });
}

第二步：修改getDroplets让它返回Promise #

现在getRequest返回Promise了，getDroplets可以改成async函数，直接用await接收请求结果并返回处理后的数据：

async function getDroplets(url, api_key) {
  const response = await getRequest(url, api_key);
  const droplets = response.droplets;
  const numDroplets = droplets.length;
  return { droplets: droplets, numDroplets: numDroplets };
}

第三步：实现listDroplets函数 #

现在getDroplets返回的是一个包含数据的Promise，你就可以在listDroplets里用await获取结果，还能加上错误处理：

async function listDroplets(api_url, api_key) {
  try {
    const dropletData = await getDroplets(api_url, api_key);
    alert(dropletData.numDroplets);
    // 这里可以继续处理dropletData.droplets，比如渲染到页面上
  } catch (error) {
    // 处理请求失败的情况
    console.error('获取Droplets失败:', error);
  }
}

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

你之前的getDroplets没有返回任何值（它里面的return { droplets: ... }是回调函数里的返回值，不是getDroplets本身的返回值），而且它也不是Promise，所以await根本无法等待它完成异步操作，自然拿不到数据。另外，你原来的listDroplets里的request变量也没有定义，这也是一个错误点。

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