前端异步流程工具
前端异步流程工具
传统的方案:
- 回调函数
- 事件
工具的方案:
1. Promise
总结:
a. 通过new Promise()
b. 参数是一个回调函数, 回调函数中有两个参数 (resolve reject)-
resolve也是一个函数, 函数中接收参数, 参数为任务
- resolve 中任务主线程 , 而then中任务是放在异步队列中的,执行在主线程之后
c. Promise对象的api
then(callback)
catch(cb)
d.all race
all([value1,value2])
指的是将数组中所有的任务执行完成之后, 才执行.then 中的任务
race表示赛跑, 谁快, 谁输出
项目中使用:
需求: 先获取数据,然后将获取的数据赋值给某一个变量
const p3 = new Promise((resolve,reject)=>{ request('http://api.douban.com/v2/movie/in_theaters',(err,res,data)=>{ resolve(data) }) }).then((data)=>{ // console.log( data ) obj.data = data }).then(()=>console.log(obj.data))
2. gengerator函数
es6 提供的 generator函数
a. 在function关键字后加一个* , 那么这个函数就称之为generator函数
b. 函数体有关键字 yield , 后面跟每一个任务 , 也可以有return关键字, 保留一个数据
c. 通过next函数调用, 几个调用, 就是几个人任务执行
function* g1(){ yield '任务1' yield '任务2' yield '任务3' return '任务4' } const g1done = g1(); console.log(g1done.next()); console.log(g1done.next())
**3. async await **
a. es7新增的 async函数
b. 格式
async function aa(){ await '任务1' await '任务2' }
c. 问题: readFile(’./01-Promise.js’) 运行结果是Promise, 但是我们使用 async await之 后, 它的结果是具体的数据了?
分析: async函数使用了generator函数的语法糖 , 它直接生成对象 {value: ‘’,done:false} await 直接将value提取出来了
实现: 将三层函数嵌套的第三层中的返回值返回来
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()
d. 扩展:
多层函数嵌套(异步执行) , 我们想把里层函数,一般情况出现在数据请求,我们将请求得到的数据返回出来
解决: Promise + async
** 4. node.js nextTick setImmidate**
nextTick vs setImmediate
轮询:
a.nodejs中是事件驱动的,有一个循环线程一直从事件队列中取任务执行或者
I/O的操作转给后台线程池来操作,把这个循环线程的每次执行的过程算是一次轮询.
b.setImmediate()的使用
即时计时器立即执行工作,它是在事件轮询之后执行,为了防止轮询阻塞,每次只会调用一个。
c.Process.nextTick()的使用
它和setImmediate()执行的顺序不一样,它是在事件轮询之前执行,为了防止I/O饥饿,所以有一个默认process.maxTickDepth=1000来限制事件队列的每次循环可执行的nextTick()事件的数目。
总结:
1. nextTick()的回调函数执行的优先级要高于setImmediate();
2、 process.nextTick()属于idle观察者,setImmediate()属于check观察者.在每一轮循环检查中,idle观察者先于I/O观察者,I/O观察者先于check观察者.
3. 在具体实现上,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('主线程')
** 5. 第三方库 async.js**
a. 第三方的封装库
b. 暴露了一个 async对象 , 这个对象身上有很多的api
c. api (多任务执行)
parallel
series
举例:
async.parallel([ function(callback){ callback(null,'任务1') }, function(callback){ callback(null,'任务2') }, ],(err,data)=>{ console.log('data',data) })
- 前端异步流程工具
- 前端异步流程工具
- 前端异步流程工具
- IC设计前端到后端的流程和eda工具。
- 异步流程控制(js前端)
- 前端通过AJAX提交数据,后台PHP处理数据实现异步操作基本流程
- 学习安装gulp前端自动化工具步骤流程
- IC设计前端到后端的流程和EDA工具
- 亚信UED前端流程自动化构建工具
- ic设计前端到后端的流程和eda工具?
- 异步流程控制工具的使用方法
- 现代web前端开发工具和流程
- 异步流程工具
- IC设计前端到后端的流程和eda工具。
- Web前端优化最佳实践及工具集锦
- 基于Bootstrap和jQuery构建前端分页工具实例代码
- 前端进阶(8) - 前端开发需要了解的工具集合:webpack, eslint, prettier, ...
- web前端常用的测试工具
- 前端开发的 10 个新鲜工具
- 流程设计器之标签工具