梳理所有前端异步解决方案

本文梳理了前端异步处理的发展,从原始的回调函数,到Promise的链式处理,再到async/await的同步化写法。讨论了Promise的本质和Generator如何实现异步控制,并介绍了async函数作为Generator的语法糖在异步编程中的优势。
摘要由CSDN通过智能技术生成

众所周知js是单线程,从头跑到尾然后不停的事件循环,但是浏览器是多线程的,所有前端所有的异步可以归纳为,js的事件循环在根据标准不停的前后执行不同异步线程的回调

其实现在js对于异步的所有解决方案不管是async 还是 promise 还是监听什么的归根结底都是回调触发,而我们至今为异步所作的所有努力不过是让异步回调写的更加像同步一些
目前前端对异步的处理大致经过这三个阶段

1 纵向无限回调,比如ajax的回调

2 promise 通过then链式回调,比如axios等

3asyns 通过promise在resolve中交换控制权来自动执行的迭代器来让异步变得看起来像同步

无限回调就不讲了,每个回调函数之前相互依赖形成强耦合从而使代码纵向发展变成一坨代码

直接从promise开始,promise其实就是回调换了一种写法而已,也就是对回调多了一层封装
简单来讲就是他是一个原生提供的js对象,接受一个函数作为参数来生成实例,这个函数又以resolve,reject这两个函数作为参数

一共有三种状态分别是进行中(pending)已解决(fulfilled)已失败(rejected)

然后我们平常说的什么把一个异步回调封装成promise什么的听起来高大上不过就是,你自己根据回调函数的结果,自行选择执行resolve(将状态从pending转换成fulfilled)或者reject(将状态从pending转换成rejected)

const promise = new Promise(function(resolve, reject) {
   
  // ... some code

  if (/* 异步操作成功 */){
   
    resolve(value);
  } else {
   
    reject(error);
  }
});

然后他有一个最重要也是用的最多的一个方法then()他接受两个函数作为参数分别作为上面说的resolve,reject执行完成后的回调参数,而参数则是则是由resolve传入

const promise = new Promise(function(resolve, reject) {
   
  // ... some code

  if (
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值