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 相关文章推荐
2010年最佳jQuery插件整理
Dec 06 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
React 组件中的 bind(this)示例代码
Sep 16 Javascript
Vue.js中的组件系统
May 30 Javascript
layui select 禁止点击的实现方法
Sep 05 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
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
DIV菜单层实现代码
2010/11/19 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
总经理驾驶员岗位职责
2013/12/04 职场文书
中学生操行评语
2014/04/24 职场文书
小学数学教研活动总结
2014/07/01 职场文书
机电系毕业生求职信
2014/07/11 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
同意落户证明
2015/06/19 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
Go语言基础函数基本用法及示例详解
2021/11/17 Golang
python单向链表实例详解
2022/05/25 Python