×

ES6:实例说明异步处理方法

作者:andy0012021.07.20来源:Web前端之家浏览:109评论:0
关键词:js

最初使用回调函数

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

但是node中有明确的规范

node中的的回调模式:

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

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

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

es6 异步处理模型

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

  • 两个阶段: 未决unsettled, 已决settled。

  • 三个状态: pending挂起状态 , resolved成功, rejected失败

  • 总是从未决阶段推向已决阶段,且已决阶段的状态不再改变

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

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

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

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

如何使用promise

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做了个概述,要掌握的其他细节还有很多,大家可以继续研究。

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/js20210720sdf.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 大吨位油缸

    谷歌浏览器使用起来很快,没有乱七八糟的插件。www.sdlyxt.com...

  • Web前端之家

    可以加Q群...

  • 访客

    JS点击锚点实现平滑滚动能写一个备注呗,有点看不懂,谢谢...

  • alice

    试用了下,vee-validate挺好用的!...

  • 访客

    封装思路跟原生javascript基本差不多。...

  • qianduan

    这个跟H5做的很像,看上去用react实现起来要简单些。...

  • qianduan

    YYDS的文章,收藏了。...

  • 访客

    红红火火恍恍惚惚...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.7 Valyria