.then()使用时为什么不需要async关键字？JS如何识别异步操作？

1. 为什么await必须搭配async关键字，而.then()不需要额外声明？ #

async关键字有两个核心作用：

• 标记当前函数的返回值会被自动封装为Promise：无论函数内部返回普通值还是抛出错误，最终都会转换为Promise.resolve(返回值)或者Promise.reject(错误对象)
• 告知JS解析器，该函数内部可能存在await关键字，需要支持「暂停函数执行、等待异步结果返回后再恢复执行」的逻辑，且暂停过程不会阻塞主线程

而.then()是Promise实例本身自带的方法，只要你操作的是一个已经存在的Promise对象，就可以直接调用，自然不需要额外做声明。

额外补充：ES2022已经支持ES模块环境下的顶层await，无需包裹async函数即可直接使用。普通脚本/普通函数中不能直接用await，是因为JS解析器无法确定要暂停哪个上下文的执行，必须用async明确标记作用域。

2. 既然async/await是.then()的语法糖，为什么二者可以互相嵌套使用？ #

async/await确实是Promise链式调用的语法糖，但它只是简化了写法，完全没有改变底层基于Promise的运行逻辑。所有async/await的实现本质还是转换为.then()链式调用执行，二者操作的都是同一个Promise体系，自然可以随意混用。

举个等价示例：

// async/await写法
async function fetchData() {
  const res = await fetch('/user/list')
  const userList = await res.json()
  return userList
}

// 等价的纯.then()写法
function fetchData() {
  return fetch('/user/list')
    .then(res => res.json())
}

很多场景下混用反而会提升代码性能，比如并行发起多个异步请求时：

async function batchFetch() {
  // 两个请求同时发起，无需等待第一个返回再发第二个
  const task1 = fetch('/api1').then(res => res.json())
  const task2 = fetch('/api2').then(res => res.json())
  // 等待两个请求都完成
  const [data1, data2] = await Promise.all([task1, task2])
}

3. 为什么.then()执行后始终返回Promise？能不能不用.then()处理async函数的返回值？ #

.then()永远返回Promise是Promise的设计规范，目的是支持链式调用：无论你在.then()的回调中返回普通值、抛出错误还是返回另一个Promise，都会被自动封装为新的Promise，这样你才能持续链式调用.then()/.catch()/.finally()处理后续逻辑。

完全可以不用.then()处理async函数的返回值，只要你在支持await的上下文中用await接收即可：

async function getResult() {
  // 直接用await接收async函数返回的Promise，无需调用.then
  const userList = await fetchData()
  console.log(userList)
}

// ES模块环境下可以直接在顶层用await
const userList = await fetchData()

只有当你处于非async函数的同步上下文、或者非ES模块的顶层环境中，无法使用await时，才需要用.then()来获取异步结果。

4. 各种异步写法规则看起来混杂，有没有统一的逻辑？ #

所有异步写法的核心规则只有3条，完全没有冲突：

• 只要是Promise对象，就可以调用.then()/.catch()/.finally()，不管这个Promise来自async函数返回、await操作、还是手动new Promise生成
• await只能出现在async标记的函数，或者ES模块的顶层，作用是暂停当前async函数的执行，等待Promise状态变更：状态为fulfilled时返回结果，状态为rejected时抛出错误，既可以用try/catch捕获，也可以直接给Promise加.catch()处理
• async函数永远返回Promise，函数内部return的值就是该Promise resolve的结果，内部抛出的错误就是该Promise reject的原因

举个错误处理的等价示例：

// 写法1：用try/catch捕获await抛出的错误
async function test1() {
  try {
    const data = await fetch('/api')
  } catch (err) {
    console.error('请求失败', err)
  }
}

// 写法2：直接给Promise加.catch处理，效果完全一致
async function test2() {
  const data = await fetch('/api').catch(err => console.error('请求失败', err))
}

两种写法没有优劣之分，你可以根据场景和个人习惯选择。

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