JavaScript中异步函数返回值赋值变量遇undefined问题求解

云原生阿岚

2026-5-27

解决异步函数返回undefined的问题

嘿，我来帮你搞定这个问题！你遇到的核心问题是async函数返回的是Promise对象，而不是直接的异步结果，所以直接赋值后拿到的不是你想要的数据，而是一个还未完成的Promise，这就是为什么你会得到undefined。

问题出在哪？

你原来的代码里：

var dropletData = async(key) => { 
  data = await getDroplets(key); 
  return data; 
}; 
dropletData = dropletData(api_key);

当你调用dropletData(api_key)时，它返回的是一个Promise，而不是解析后的droplet数据。这时候dropletData变量存储的是Promise对象，如果你直接尝试访问它的属性（比如dropletData.droplets），自然会得到undefined，因为Promise还没完成异步操作。

正确的解决方法

有两种常用的方式来获取异步函数的结果：

方法1：在async函数中使用await（推荐）

把你的代码放在一个async函数里，用await等待Promise解析完成，同时记得加上错误处理：

async function fetchAndUseDropletData() {
  try {
    // 等待getDroplets完成，拿到真正的数据
    const dropletData = await getDroplets(api_key);
    // 这里可以正常使用dropletData了
    console.log('Droplet数量:', dropletData.numDroplets);
    console.log('所有Droplets:', dropletData.droplets);
  } catch (error) {
    // 处理请求失败的情况
    console.error('获取Droplet数据出错:', error);
  }
}

// 调用这个函数
fetchAndUseDropletData();

方法2：使用Promise的.then()链式调用

如果你不想用async/await，也可以直接用Promise的.then()方法处理结果：

getDroplets(api_key)
  .then(dropletData => {
    // 这里拿到解析后的数据
    console.log('Droplet数量:', dropletData.numDroplets);
    console.log('所有Droplets:', dropletData.droplets);
  })
  .catch(error => {
    // 处理错误
    console.error('获取Droplet数据出错:', error);
  });