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 相关文章推荐
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
jqeury-easyui-layout问题解决方法
Mar 24 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
vue中input的v-model清空操作
Sep 06 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
php批量更改数据库表前缀实现方法
2013/10/26 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
angular2使用简单介绍
2016/03/01 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
python2.7的编码问题与解决方法
2016/10/04 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
医科大学毕业生自荐信
2014/02/03 职场文书
妇联主席先进事迹
2014/05/18 职场文书
债务纠纷委托书
2014/08/30 职场文书
2015年公司工作总结
2015/04/25 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
Java异常体系非正常停止和分类
2022/06/14 Java/Android
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android