JavaScript中async/await能否阻塞代码？如何正确使用它获取数据？

核心疑问解答 #

1. 能不能让代码完全等待异步响应？
   当然可以，只是你当前的写法没做到。异步函数调用后会立即返回Promise，后续的同步代码不会等待异步操作完成，所以你看到console.log(number of characters...)先输出了null。

2. 使用json()返回的数据必须在then()里操作吗？
   不需要，async/await就是用来替代then()链式调用的语法糖，能让异步代码看起来像同步代码一样直观。

仅用async/await的正确写法 #

你需要把调用fetchData并处理结果的代码放在一个async函数中，用await等待异步操作完成，再执行后续逻辑：

async function fetchData(str = ''){
    const response = await fetch(`https://rickandmortyapi.com/api/${str}`)
    const data = await response.json()
    return data
}

// 用async函数包裹逻辑
async function main() {
    const res = await fetchData('character')
    console.log(`number of characters is ${res.info.count}`)
}

// 执行主函数
main()

原代码输出顺序的原因 #

JavaScript是单线程的，异步任务会被放到任务队列中，等同步代码执行完才会处理。你的代码执行顺序是：

• 先声明res = null
• 调用fetchData('character')，浏览器开始发送请求，代码继续往下走
• 执行console.log(number of characters is ${res})，此时res还是null，所以先输出这行
• 请求完成后，fetchData里的await执行完毕，返回数据，触发then()里的逻辑，同时fetchData内部的console.log(data)也会执行，所以后面才输出那两个对象

内容的提问来源于stack exchange，提问作者Caio m. silva