Skip to content

异步

约 849 字大约 3 分钟

原理前端JavaScript

2025-06-18

  1. 回调函数 容易出现回调函数地狱,多层回调函数嵌套,每种任务的处理结果存在两种可能(成功或失败)那么需要在每种任务执行完成后分别处理这两种可能
  2. Promise 通过Promise的then处理链式调用可避免回调函数地狱的问题。但可读性依旧不好维护
  3. Generator 最大的特点就是可以交出函数的执行权。Generator函数可以看出是异步任务的容器,在需要暂停的地方,都用yield语法来标注。 是js中的协程
  4. async/await async 是 Generator 函数的语法糖,async/await的优点是代码清晰。可以处理回调地狱的问题 可以以同步代码的方式执行异步逻辑,使代码更加可读

Promise

Promise有三种状态:

  1. 待定(pending):初始状态,既没有被完成,也没有被拒绝
  2. 已完成(fulfilled):操作成功完成
  3. 已拒绝(rejected):操作失败

Promise利用了三大技术手段来解决回调地狱:

  1. 回调函数延迟绑定 使用Promise.then()就是回调函数延迟绑定
  2. 返回值穿透 在Promise中返回值也是Promise,在前面的Promise.then中返回的Promise可以被后续的then函数处理这就是返回值穿透 使用这种方法与回调函数延迟绑定可以将回调函数嵌套的形式转换成链式调用的形式,没有那么多嵌套层级可读性有了一定的提高
  3. 错误冒泡 由于返回值穿透,当前面的Promise执行出错后返回的Promise也是错误的,错误结果可以在Promise中传递,这就是错误冒泡 多层Promise的错误只需要在结尾使用一个catch处理即可

Generator

本质上,整个Generator函数就是一个封装的异步任务,或者说是异步任务的容器。 yield命令是异步不同阶段的分界线,有时也会把yield当成是return,yield跟return有本质的不同。

协程

声明方法

声明generator函数是在声明普通函数的function关键字后加上一个*

function* func(){
	yield 1
	yield 2
}

for(let a=0;a<3;++a){
	console.log(func.next())
}  //1,2,undefined

协程函数需要调用next函数来开始执行,执行到yield就会暂时返回,再次调用next时将从上次yield返回的地方继续执行,如果整个协程函数已经执行完毕再次调用next将返回undefined

  • function*:声明协程函数
  • yield:暂时返回关键字。返回一个迭代器对象,该对象有value(yield的返回值)和done(是否完成)两个属性
  • next():开始执行协程函数,直到遇到yield时暂停
  • yield*:遍历执行协程函数的语法糖,如果在协程函数中需要执行另一个协程函数,使用遍历的方法会导致嵌套过深,使用yield*语法糖能一次性将一个协程函数全部执行完毕yield* func() 使用调用普通函数的方法调用协程函数协程函数是不会执行的,会阻塞住,只有使用其内部的next函数调用才会执行

贡献者

PinkDopeyBug

公告

本博客内容原本使用obsidian编写,由于没有仔细配置,以至图片引用使用obsidian风格。

且图片存储路径频繁变更导致部分文章图片无法正常显示。

为您带来不便请谅解。

ps:贡献者一直都只有wynnsimon一人,显示Pink的贡献者是因为我没好好配置git。后面因为懒就没一个个修改。如果被提及的人不希望被显示可以联系我我会立即删除。