前端异步流程工具的方案promise、gengerator、async-await、node.js的nextTick setlmmidate、第三方库(async.js)
前端异步流程工具的方案
- promise
- gengerator函数
- async-await
- node.js nextTick setImmidate
- 第三方库 async.js
一.promise
-
通过new promise()构造promise
-
参数是一个回调函数,回调函数中有两个参数(resolve,reject)
-
resolve也是一个函数,函数中接收参数,参数为任务
- resolve中任务主线程,而then中任务是放在异步队列中的,执行在主线程之后
-
promise对象的api
then(callback)
catch(callback) -
all race
all([value1,value2])
指的是将数组中所有的任务执行完成之后, 才执行.then 中的任务
race表示赛跑, 谁快, 谁输出
promise简单的使用:
const promise = new Promise((resolve,reject)=>{ request('http://api.douban.com/v2/movie/in_theaters',(err,res,data)=>{ resolve(data); }).then((data)=>{ console.log(data) }).catch(err=>{throw err}) });
promise结合js原生ajax的使用,实现异步操作
new Promise((reslove, resject) => { var xml = new XMLHttpRequest(); xml.open(type, url); xml.send(); xml.onreadystatechange = () => { if (xml.readyState == 4 && xml.status == 200) { reslove(responseText); } else { resject(error); } } }).then((data)=>{ console.log(data) }).catch(err=>{throw err})
promise结合jquery的$.ajax的使用,实现异步操作
new Promise((reslove, resject) => { $.ajax({ url: url, type: type, data: data, dataType: 'json', sussess: (response) => { reslove(response); }, error: (err) => { resject(err); } }) }).then((data)=>{ console.log(data) }).catch(err=>{throw err})
二.generator
es6提供的 generator函数
1.在function关键字后加一个*,那么这个函数就称之为generator函数
2.函数体有关键字 yield,后面跟每一个任务,也可以有return关键字,保留一个数据
3.通过next函数调用,几个调用,就是几个人任务执行
示例:
function* g1(){ yield '任务1' yield '任务2' yield '任务3' return '任务4' } const g1done = g1() console.log(g1done.next()) console.log(g1done.next()) console.log(g1done.next()) console.log(g1done.next())
三. async
1.es7新增的async函数
2. 格式
async function aa(){ await '任务1' await '任务2' }
3.问题: readFile(’./01-Promise.js’) 运行结果是Promise, 但是我们使用 async await之后, 它的结果是具体的数据了?
分析: async函数使用了generator函数的语法糖 , 它直接生成对象 {value: ‘’,done:false} await 直接将value提取出来了
实现: 将三层函数嵌套的第三层中的返回值返回来
4.扩展:
多层函数嵌套(异步执行) , 我们想把里层函数,一般情况出现在数据请求,我们将请求得到的数据返回出来
解决: Promise + async
示例:
const fs = require('fs') const readFile = (filename) =>{ return new Promise((resolve,reject)=>{ fs.readFile(filename,(err,data)=>{ resolve(data.toString()) }) }) } const asyncFn = async() => { const f1 = await readFile('./01-Promise.js') // {value: '', done: false} // const f1 = readFile('./01-Promise.js').then(data=>data) const f2 = await readFile('./02-generator.js') console.log( f1 ) console.log( f2 ) } asyncFn()
四.nextTick vs setImmediate
轮询:
nodejs中是事件驱动的,有一个循环线程一直从事件队列中取任务执行或者
I/O的操作转给后台线程池来操作,把这个循环线程的每次执行的过程算是一次轮询.
2.setImmediate()的使用
即时计时器立即执行工作,它是在事件轮询之后执行,为了防止轮询阻塞,每次只会调用一个。
3.Process.nextTick()的使用
它和setImmediate()执行的顺序不一样,它是在事件轮询之前执行,为了防止I/O饥饿,所以有一个默认process.maxTickDepth=1000来限制事件队列的每次循环可执行的nextTick()事件的数目。
总结:
-
nextTick()的回调函数执行的优先级要高于setImmediate();
-
process.nextTick()属于idle观察者,setImmediate()属于check观察者.在每一轮循环检查中,idle观察者先于I/O观察者,I/O观察者先于check观察者.
-
在具体实现上,process.nextTick()的回调函数保存在一个数组中,
setImmediate()的结果则是保存在链表中.
在行为上,process.nextTick()在每轮循环中会将数组中的回调函数全部执行完.
而setImmediate()在每轮循环中执行链表中的一个回调函数.
示例:const process = require('process') process.nextTick(()=>{ console.log('A') process.nextTick(()=>{ console.log('E') }) setImmediate(()=>{ console.log('F') }) }) process.nextTick(()=>{ console.log('B') process.nextTick(()=>{ console.log('G') }) setImmediate(()=>{ console.log('H') }) }) setImmediate(()=>{ console.log('c') }) process.nextTick(()=>{ console.log('D') }) console.log('主线程')
五.第三方库 (async.js)
-
第三方的封装库
-
暴露了一个 async对象 , 这个对象身上有很多的api
-
api (多任务执行)
parallel
series
举例:async.parallel([ function(callback){ callback(null,'任务1') }, function(callback){ callback(null,'任务2') }, ],(err,data)=>{ console.log('data',data) })
除了npm之外的一个包管理器 yarn
yarn add ---> npm i / npm install yarn remove ---> npm uninstall yarn add jquery global ----> npm i jquery -g yarn add jquery -----> npm i jquery -S || npm i jquery --save yarn add jquery -D -----> npm i jquery -D || npm i jquery --save-dev
- 从零学习node.js之详解异步控制工具async(八)
- 前端异步流程工具之一:Promise原理
- node.js 异步流程控制async
- Node.js异步管理工具Async
- js异步回调Async/Await与Promise区别
- 利用async和await异步操作解决node.js里面fs模块异步读写,同步结果的问题
- 【深入浅出Node.js系列十四】Nodejs异步流程控制Async
- vue:异步async and await与this.nextTick()的使用
- 前端的异步解决方案之Promise和Await-Async
- 前端的异步解决方案之Promise和Await-Async
- 浅谈前端异步流程工具(涵盖所有主流方法)
- Node.js中的setImmediate()与process.nextTick
- node.js中的process.nextTick()和setImmediate()
- 利用第三方async.js实现异步
- 前端异步流程工具 & express
- JS的四种异步方式:回调/监听/流程控制库/promise
- 深入浅析Node.js 事件循环、定时器和process.nextTick()
- 理解异步之美:Promise与async await(一)
- node.js快速入门: learnyounode题目解答,http collect ,async/await in node...etc
- 理解 Node.js 里的 process.nextTick()