es6异步解决方案

最初使用回调函数

? 由于最初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状态 :

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做了个概述,

要掌握的其他细节还有很多

原文地址:https://www.cnblogs.com/LHLVS/p/12294201.html

时间: 2024-10-21 19:50:01

es6异步解决方案的相关文章

ES6 异步编程解决方案 之 Async

一.async 函数的基本用法 async 函数返回一个 Promise 对象,可以使用 then .catch 方法 添加回调函数 async 函数执行时,一旦遇到 await 就会先返回,等到异步操作完成,再接着执行函数体内后面的语句 [异步函数 同步执行] async 函数有很多种形式: // 函数声明 async function foo() {} // 函数表达式 const foo = async function () {}; // 箭头函数 const foo = async (

js async await 终极异步解决方案

既然有了promise 为什么还要有async await ? 当然是promise 也不是完美的异步解决方案,而 async await 的写法看起来更加简单且容易理解. 回顾 Promise Promise 对象用于表示一个异步操作的最终状态(完成或失败),以及其返回的值. Promise 对象是由关键字 new 及其构造函数来创建的.构造函数会,把一个叫做“处理器函数”(executor function)的函数作为它的参数.这个“处理器函数”接受两个函数resolve 和 reject 

es6异步函数调用

开发很多的时候需要异步操作,常用的做法就是用回调函数,假如需要一连串的调用,并且后面一个调用依赖前一个返回的结果的时候,就得多层嵌套回调函数,比如下面这种情况: $('.animateEle').animate({ opacity:'.5' }, 4000,function(){ //回调 $('.animateEle2').animate({ width:'100px' },2000,function(){ //回调 $('.animateEle3').animate({ height:'0'

Windows 10 开发日记(五)-- 当Binding遇到异步 -- 解决方案

前文再续,上一章提出了问题,本章提出了三种解决方案: 解决方案一:手动进行异步转换,核心思想:将binding做的事情放入CodeBehind FilterItemControl.XAML: <Grid> <Image x:Name="FilterImage" Stretch="UniformToFill"/> <Grid VerticalAlignment="Bottom" Height="20"

异步解决方案的发展历程

1. 回调函数(callback) setTimeout(() => { // callback 函数体 }, 1000) 缺点:回调地狱,不能用 try catch 捕获错误,不能 return 回调地狱的根本问题在于: 缺乏顺序性: 回调地狱导致的调试困难,和大脑的思维方式不符: 嵌套函数存在耦合性,一旦有所改动,就会牵一发而动全身,即(控制反转): 嵌套函数过多的多话,很难处理错误. 优点:解决了同步的问题(只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行). 2.

切图崽的自我修养-[ES6] 异步函数管理方案浅析

前言 业务开发中经常会用到异步函数,这里简单的对异步函数以及它的各种各样的解决方案做一个浅析 优缺点: 优点: 能够极大的提高程序并发业务逻辑的能力. 缺点: 异步函数的书写方式和代码执行逻辑很不直观,回调函数这种方式不太符合人类的的线性思维 异步函数的执行流程通常不好管理 不好对异步函数部署错误处理机制 解决方案 针对异步函数存在的缺点,所以才有了形形色色的异步的处理方案,常见的比如 原生的回调函数 promise/A+ async/await(generator); 业务场景 但这些解决方案

webpack使用tree shaking的问题。及关于UglifyJs不支持ES6的解决方案。

webpack: plugins:[ new webpack.optimize.UglifyJsPlugin({ compress:{warning:true} }) ] 是的,一些dead code 在打包后会被移除.比如没用的varible ,function. 但是classes会被UglifyJs作为side effect,然后跳过它. 我的TypeScript配置tsconfig.json : compilerOptions:{ target:'es5', module:'es2015

es6异步编程 Promise 讲解 --------各个优点缺点总结

//引入模块 let fs=require('fs'); //异步读文件方法,但是同步执行 function read(url) { //new Promise 需要传入一个executor 执行器 //executor需要传入两个函数 resolve reject return new Promise((resolve,reject)=>{ fs.readFile(url,'utf8',function (err,data) { if(err){ reject(err) }else{ reso

JavaScript异步编程__“回调地狱”的一些解决方案

异步编程在JavaScript中非常重要.过多的异步编程也带了回调嵌套的问题,本文会提供一些解决"回调地狱"的方法. setTimeout(function () { console.log('延时触发'); }, 2000); fs.readFile('./sample.txt', 'utf-8', function (err, res) { console.log(res); }); 上面就是典型的回调函数,不论是在浏览器中,还是在node中,JavaScript本身是单线程,因此