JS ES6异步解决方案


Posted in Javascript onApril 29, 2021

最初使用回调函数

​ 由于最初j s官方没有明确的规范,各种第三方库中封装的异步函数中传的回调函数中的参数没有明确的规范, 没有明确各个参数的意义, 不便于使用。

​ 但是node中有明确的规范

​ node中的的回调模式:

1. 所有回调函数必须有两个参数,第一个参数表示错误,第二个参数表示结果

2. 所有回调函数必须作为函数最后的参数

3. 所有回调函数不能作为属性出现

es6 异步处理模型

Es6 出现以后, 官方就提出了异步处理的规范, 提出了一种适用于所有异步场景的处理模型。该模型有:

  • 两个阶段: 未决unsettled, 已决settled。
  • 三个状态: pending挂起状态 , resolved成功, rejected失败
  • 总是从未决阶段推向已决阶段,且已决阶段的状态不再改变

任务已决状态后可能需要后续处理,

  • 针对resolved的后续处理我们称之为thenable
  • 针对rejected的后续处理我们称之为catchable

为该异步模型量身打造的API : promise

如何使用promise

Copy

const task = new Promise((resolve, reject) => {     
    // 任务未决阶段代码  
    // 立即执行  
    console.log("开始100米长跑");  
    setTimeout(() => {  
       if (Math.random() > 0.5) {  
           // 成功: 跑完了  
           // 推向成功  
           resolve("跑完了");  
       } else {  
           // 失败: 腿摔断了  
           // 推向失败  
           reject("腿摔断了");  
       }  
    }, 1000)
});
task.then((result) => {
  console.log(result);
}).catch((error) => {
  console.log(error);
})

1s 后任务推向已决, 后续处理在then 或者 catch中 处理。

注意

pending状态 =》rejected状态 :

Copy

1. 调用reject

2. 代码执行报错

3. 手动抛出错误

后续处理函数一定是异步的,且会放到微队列中,

j s执行栈清空后会先执行微队列中的任务,微队列里任务清空后才会执行宏队列中的任务。

  • 宏任务队列有:setTimeout,setInterval,setImmediately,I/O,UI render
  • 微任务队列有:promise,process.nexttick,Object.observe(已经不用了),Mutation.observe

Async await 是es7新增的promise的语法糖大家也可以了解下,本文只是对promise做了个概述,要掌握的其他细节还有很多

以上就是JS ES6异步解决方案的详细内容,更多关于ES6异步解决方案的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
没有document.getElementByName方法
Aug 19 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
js实现div模拟模态对话框展现URL内容
May 27 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 Javascript
小程序实现发表评论功能
Jul 06 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
聊聊JS ES6中的解构
Apr 29 #Javascript
详解TypeScript中的类型保护
Apr 29 #Javascript
7个你应该知道的JS原生错误类型
Apr 29 #Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
如何使用JavaScript策略模式校验表单
Apr 29 #Javascript
react中props 的使用及进行限制的方法
Apr 28 #Javascript
React Hook用法示例详解(6个常见hook)
You might like
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
JavaScript 学习笔记(六)
2009/12/31 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
python计算时间差的方法
2015/05/20 Python
详解python中的hashlib模块的使用
2019/04/22 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
python如何绘制疫情图
2020/09/16 Python
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
YII2 全局异常处理深入讲解
2021/03/24 PHP
银行会计业务的个人自我评价
2013/11/02 职场文书
党员学习十八大感想
2014/01/17 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
幸福来敲门观后感
2015/06/04 职场文书
入团介绍人意见范文
2015/06/04 职场文书
失恋33天观后感
2015/06/11 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
Django使用redis配置缓存的方法
2021/06/01 Redis
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
JS实现简单九宫格抽奖
2022/06/28 Javascript