async/await不同使用场景差异解析：为何仅第三种场景生效？

咱们来好好拆解这三个场景的核心差异，搞明白为啥只有第三种能正常拿到你想要的数组数据～

场景1：仅在axios请求中用async/await——无法工作 #

export const getAll = async () => { 
  const retrievedData = await axios.get('http://localhost:3001/anecdotes'); 
  // 预期返回 - 数组
  return retrievedData.data; 
}; 
const test = () => { 
  let anecdotes = getAll(); 
  // 执行操作 
};

问题出在test函数里：所有被async标记的函数，不管内部逻辑如何，都会默认返回一个Promise对象。这里直接调用getAll()却没有用await或者.then()去处理这个Promise，所以anecdotes拿到的是一个处于Pending状态的Promise，根本不是你预期的数组，后续操作自然会因为数据类型不对报错。

场景2：仅在辅助方法中用async/await——无法工作 #

export const getAll = () => { 
  const retrievedData = axios.get('http://localhost:3001/anecdotes'); 
  // 预期返回 - 数组
  return retrievedData.data; 
}; 
const test = async () => { 
  let anecdotes = await getAll(); 
  // 执行操作 
};

这次的问题在getAll函数里：axios.get本身返回的是一个Promise，你直接把它赋值给retrievedData，此时retrievedData是个Promise对象，而不是请求完成后的响应结果。Promise对象本身没有data属性，所以retrievedData.data拿到的是undefined。

虽然test里用了await，但await作用在undefined上时，会直接返回undefined（因为非Promise值会被自动包装成已resolved的Promise），所以anecdotes最终还是undefined，自然没法正常工作。

场景3：两处均使用async/await——正常工作 #

export const getAll = async() => { 
  const retrievedData = await axios.get('http://localhost:3001/anecdotes'); 
  // 预期返回 - 数组
  return retrievedData.data; 
}; 
const test = async () => { 
  let anecdotes = await getAll(); 
  // 执行操作 
};

这个场景把两个关键点都做对了：

1. getAll里用await等待axios.get的Promise完成，真正拿到了请求响应对象retrievedData，然后返回它的data（也就是你要的数组）。虽然async函数会把这个数组自动包装成Promise返回，但...
2. test函数里用await等待getAll()返回的Promise，最终拿到了真正的数组数据，后续操作自然能正常执行。

核心总结 #

• async函数的返回值必然是Promise：哪怕你return的是普通值，也会被Promise.resolve()包装成Promise。
• await只对Promise生效：如果作用在非Promise值上，相当于直接返回该值，不会等待任何异步操作。
• 要正确获取异步结果，必须：在内部异步操作（比如axios请求）前加await，同时在调用async函数时也用await（或.then()）来处理返回的Promise。

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