6.Promise,Generator,async,node.js nextTick setImmidate,第三方库 async.js

1. 前端异步流程工具

传统的方案:
  1. 回调函数
  2. 事件
工具的方案:
1.Promise
  1. 通过new Promise()
  2. 参数是一个回调函数, 回调函数中有两个参数 (resolve reject)
  • resolve也是一个函数, 函数中接收参数, 参数为任务
  • resolve 中任务主线程 , 而then中任务是放在异步队列中的,执行在主线程之后
  1. Promise对象的api
    then(callback)
    catch(cb)
  2. 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函数

  1. 在function关键字后加一个* , 那么这个函数就称之为generator函数
  2. 函数体有关键字 yield , 后面跟每一个任务 , 也可以有return关键字, 保留一个数据
  3. 通过next函数调用, 几个调用, 就是几个人任务执行
3. async await
  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
4. node.js nextTick setImmidate

nextTick vs setImmediate
轮询:
nodejs中是事件驱动的,有一个循环线程一直从事件队列中取任务执行或者
I/O的操作转给后台线程池来操作,把这个循环线程的每次执行的过程算是一次轮询.
2.setImmediate()的使用
即时计时器立即执行工作,它是在事件轮询之后执行,为了防止轮询阻塞,每次只会调用一个。
3.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()在每轮循环中执行链表中的一个回调函数.
5. 第三方库 async.js

async总结:

  1. 第三方的封装库
  2. 暴露了一个 async对象 , 这个对象身上有很多的api
  3. 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
对比 : Promise vs gengerator vs async

2. 前端的通信

  1. net socket
  2. h5 webSocket
  3. pc低版本 socket.io

3. 前端的库

  1. zepto.js
  2. hammer.js
  3. swiper
  4. isScroll

4. Node.js

  1. git 冲突
    文件夹一定不能为空
    最好不要修改文件夹
    先拉取, 在上传 git pull
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值