使用Fetch API调用FakeStoreAPI返回Promise而非数据的问题求助

问题原因 #

• async函数的特性：所有async函数默认返回Promise，哪怕你return的是普通值，也会被自动包装成Promise对象，所以直接console.log(getProducts())看到的是Promise，不是实际数据。
• 异步代码的执行顺序：fetch是异步操作，代码不会等待它完成就继续执行外部的console.log(products)，此时products还没被赋值，所以显示undefined。

正确写法示例 #

1. 用.then()处理Promise

let products = [];

const getProducts = async () => {
  const response = await fetch('https://fakestoreapi.com/products');
  const data = await response.json();
  console.log(data);
  return data;
}

// 通过.then()获取异步返回的数据，此时赋值和打印都在异步完成后执行
getProducts().then(data => {
  products = data;
  console.log(products); // 能正常拿到数据
});

2. 在async函数内部直接处理数据

如果不需要把数据暴露到外部，直接在async函数里完成后续逻辑更简单：

const getProducts = async () => {
  const response = await fetch('https://fakestoreapi.com/products');
  const data = await response.json();
  console.log(data);
  // 在这里直接处理数据，比如渲染页面
  renderProducts(data);
}

getProducts();

function renderProducts(products) {
  // 这里写渲染逻辑
}

3. 用await调用async函数（需在async环境中）

如果想用await获取返回值，必须把代码放在async函数里，或者使用顶级await（现代浏览器/ES模块环境支持）：

let products = [];

const getProducts = async () => {
  const response = await fetch('https://fakestoreapi.com/products');
  const data = await response.json();
  console.log(data);
  return data;
}

// 方式一：顶级await（需环境支持）
products = await getProducts();
console.log(products);

// 方式二：放在另一个async函数里
async function init() {
  products = await getProducts();
  console.log(products);
}
init();

核心要点 #

• async函数的返回值必须通过await或.then()提取，不能直接当作普通值使用
• 异步操作不会阻塞同步代码执行，所以不要在同步代码里直接获取还未完成异步赋值的变量
• 所有依赖异步数据的逻辑，都要放在异步操作完成后的回调或async函数内部

内容的提问来源于stack exchange，提问作者J Akhtar