JS ES6异步解决方案

最初使用回调函数

​ 由于最初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异步解决方案的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JS基于ES6新特性async await进行异步处理操作示例

    JS基于ES6新特性async await进行异步处理操作示例

    本文实例讲述了JS基于ES6新特性async await进行异步处理操作.分享给大家供大家参考,具体如下: 我们往往在项目中会遇到这样的业务需求,就是首先先进行一个ajax请求,然后再进行下一个ajax请求,而下一个请求需要使用上一个请求得到的数据,请求少了还好说,如果多了,就要一层一层的嵌套,就好像有点callback的写法了,那是相当恶心的,下面我就来讲一下如何使用ES6的新特性async await进行异步处理,使上述情况就好像写同步代码一样,首先我们先举个例子: 先写上json文件: c

  • ES6 javascript的异步操作实例详解

    本文实例讲述了ES6 javascript的异步操作.分享给大家供大家参考,具体如下: 异步编程对 JavaScript 语言太重要. Javascript 语言的执行环境是" 单线程" 的, 如果没有异步编程, 根本没法用, 非卡死不可. ES6 诞生以前, 异步编程的方法, 大概有下面四种. ① 回调函数 ② 事件监听 ③ 发布 / 订阅 ④ Promise 对象 ES6 将 JavaScript 异步编程带入了一个全新的阶段, ES7 的Async函数更是提出了异步编程的终极解决

  • 微信小程序 es6-promise.js封装请求与处理异步进程

    微信小程序 es6-promise.js封装请求与处理异步进程 下载es6-promise.js置于根目录下的libs文件夹下: 在根目录utils文件夹下新建httpsPromisify.js,即定义封装请求的方法 var Promise = require('../libs/es6-promise.min') function httpsPromisify(fn) { return function (obj = {}) { return new Promise((resolve, reje

  • 详解ES6 系列之异步处理实战

    前言 我们以查找指定目录下的最大文件为例,感受从 回调函数 -> Promise -> Generator -> Async 异步处理方式的改变. API 介绍 为了实现这个功能,我们需要用到几个 Nodejs 的 API,所以我们来简单介绍一下. fs.readdir readdir 方法用于读取目录,返回一个包含文件和目录的数组. fs.stat stat 方法的参数是一个文件或目录,它产生一个对象,该对象包含了该文件或目录的具体信息.此外,该对象还有一个 isFile() 方法可以

  • ES6记录异步函数的执行时间详解

    calc calc 是一个我们想要做剖析(性能分析)的异步函数.按照惯例,它的最后一个参数是一个callback.我们像这样使用 calc: calc(arg, (err, res) => console.log(err || res)) 或许,最简单的对 calc 这样的函数来剖析性能的方法是,增加一个计时逻辑到我们需要分析的地方: const t0 = Date.now() calc(arg, (err, res) => { const t1 = Date.now() console.lo

  • ES6的Fetch异步请求的实现方法

    在前端的快速发展中,为了契合更好的设计模式,产生了Fetch框架,Fetch返回的信息比XMLHttpRequest更丰富.但它目前还不是一个标准,它支持大部分常用的http 请求和响应的标准. 一. 一个完整的post请求和响应的过程 var url = "/fetch"; fetch(url,{ method:"post", headers:{ "Content-type":"application/x-www-form-urlen

  • ES6中Generator与异步操作实例分析

    本文实例讲述了ES6中Generator与异步操作.分享给大家供大家参考,具体如下: Generator与异步操作 1.Generator概念 可以把Generator理解成一个状态机(好像React中有很多state),封装了多个内部状态.执行Generator返回的是一个遍历器对象,可以遍历Generator产生的每一个状态.在function后加*就可以声明一个Generator函数. function* hiGenerator(){ yield 'hi'; yield 'ES5'; re

  • 详解ES6中的三种异步解决方案

    前置知识准备 Generator 函数 执行会返回一个迭代器(Iterator), 在迭代器上可以调用  next() 方法, 执行下一个 yield  或 return 调用  next() 方法,会返回一个对象 {value: res, done: false} , value 的值 为 yield 之后表达式的值,done 的值 表示迭代器,是否已经执行完毕(最后一个yield  或 return ) next() 方法,可以传入一个值,做为前一个yield 表达式的返回值 有了这些知识,

  • 详解ES6之async+await 同步/异步方案

    异步编程一直是JavaScript 编程的重大事项.关于异步方案, ES6 先是出现了 基于状态管理的 Promise,然后出现了 Generator 函数 + co 函数,紧接着又出现了 ES7 的 async + await 方案. 本文力求以最简明的方式来疏通 async + await. 异步编程的几个场景 先从一个常见问题开始:一个for 循环中,如何异步的打印迭代顺序? 我们很容易想到用闭包,或者 ES6 规定的 let 块级作用域来回答这个问题. for (let val of [

  • JS ES6异步解决方案

    最初使用回调函数 ​ 由于最初j s官方没有明确的规范,各种第三方库中封装的异步函数中传的回调函数中的参数没有明确的规范, 没有明确各个参数的意义, 不便于使用. ​ 但是node中有明确的规范 ​ node中的的回调模式: 1. 所有回调函数必须有两个参数,第一个参数表示错误,第二个参数表示结果 2. 所有回调函数必须作为函数最后的参数 3. 所有回调函数不能作为属性出现 es6 异步处理模型 Es6 出现以后, 官方就提出了异步处理的规范, 提出了一种适用于所有异步场景的处理模型.该模型有:

  • promise和co搭配生成器函数方式解决js代码异步流程的比较

    在es6中引入的原生Promise为js的异步回调问题带来了一个新的解决方式,而TJ大神写的co模块搭配Generator函数的同步写法,更是将js的异步回调带了更优雅的写法. 今天我想对比一下这两种方式,来看看这两种方式的区别以及优劣. 我们先抽象几个操作: 以做饭为例,我们先去买菜,回来洗菜,刷碗,烧菜,最后才是吃.定义如下方法: var buy = function (){}; //买菜,需要3s var clean = function(){}; //洗菜,需要1s var wash =

  • js fetch异步请求使用实例详解

    js fetch异步请求使用实例详解

    目录 认识异步 fetch(url) response.json() 结合async和await 异常处理 post请求 总结 认识异步 首先我们得明白请求是一个异步的过程. 因为请求需要时间向服务器发送请求和接收请求结果. 我们得要等待请求完成然后执行请求完成后的回调,来对接收到的请求结果做处理. fetch(url) 为了方便学习,我们借用一下uni-app教程的api接口. const url = 'https://unidemo.dcloud.net.cn/api/news' 我们需要知

  • JS跨域解决方案之使用CORS实现跨域

    JS跨域解决方案之使用CORS实现跨域

    引言 跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免的需要进行跨域操作,所以跨域能力也算是前端工程师的基本功之一. 和大多数跨域的解决方案一样,JSONP也是我的选择,可是某天PM的需求变了,某功能需要改成支持POST,因为传输的数据量比较大,GET形式搞不定.所以折腾了下闻名已久的CORS(跨域资源共享,Cross-Origin Resour

  • JS ES6多行字符串与连接字符串的表示方法

    本文实例讲述了JS ES6多行字符串与连接字符串的表示方法.分享给大家供大家参考,具体如下: 1. 以前,js多行字符串用\n写起来比较费事,所以最新的ES6标准新增了一种多行字符串的表示方法,用` ... `表示: 旧版写法 alert("你好,\n 我叫\n Olive"); 新版写法 alert(`你好 我叫 olive`);//注意这里的两个点是键盘上数字键1左边的按键,而不是单引号哦 2. 以前,把多个字符串连接起来,可以用+号连接 var name ="olive

  • js es6系列教程 - 新的类语法实战选项卡(详解)

    其实es6的面向对象很多原理和机制还是ES5的,只不过把语法改成类似php和java老牌后端语言中的面向对象语法. 一.用es6封装一个基本的类 class Person{ constructor( uName ){ this.userName = uName; } sayName(){ return this.userName; } } 是不是很向php和java中的类, 其实本质还是原型链,我们往下看就知道了 首先说下语法规则: class Person中的Person就是类名,可以自定义

  • 原生JS发送异步数据请求

    在做项目的时候,有时候需要用到异步数据请求,但是如果这个时候没有框架的依赖,就需要用到原生JS进行异步数据请求.这时候无非有两种请求方式,一种是AJAX,另一个是JSONP.通过原生JS对异步请求进行简单的封装. AJAX AJAX是一种数据请求方式,不需要刷新整个页面就能够更新局部页面的数据.AJAX的技术核心是XMLHttpRequest对象,主要请求过程如下: 创建XMLHttpRequest对象(new) 连接服务器(open) 发送请求(send) 接收响应数据(onreadystat

  • 浅谈js的异步执行

    1.Javascript语言的执行环境是"单线程"(single thread): 优点:实现起来比较简单,执行环境相对单纯: 缺点:只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行.常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方,其他任务无法执行. 为了解决这个问题,Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchronous). 2.&

  • js es6系列教程 - 基于new.target属性与es5改造es6的类语法

    es5的构造函数前面如果不用new调用,this指向window,对象的属性就得不到值了,所以以前我们都要在构造函数中通过判断this是否使用了new关键字来确保普通的函数调用方式都能让对象复制到属性 function Person( uName ){ if ( this instanceof Person ) { this.userName = uName; }else { return new Person( uName ); } } Person.prototype.showUserNam

  • 浅析我对JS延迟异步脚本的思考

    关于对延迟脚本的思考 async和defer属性的脚本,相信大家都听说过,但是他的真正执行细节是什么样子的?很少有文章认真研究它,可能不太有人注重细节,但其实真正有技术含量的工作和项目,对于性能要求极高,那么细节就很重要了.需要不断的实验自我尝试 最近几个月,我一直在研究一些技术,例如linux,操作系统,算法等,预计要持续学习到今年年底.红宝书第四版出来后,我也是花了很多时间去看.对于延迟脚本,自己也是做了一个实验,写下了这篇总结 什么是延迟脚本? script标签,带async和defer属

随机推荐