前端异步

77 阅读 0 评论 51 点赞

我是靠谱客的博主怕孤单花生，最近开发中收集的这篇文章主要介绍前端异步，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

promise

1.通过 new promise
2.参数是一个回调函数，回调函数中有两个参数（resolve reject）
resolve：也是一个函数，函数中接收参数，参数为任务
reject：中任务主线程，而then中任务是放在异步队列中的，执行在主线程之后
3.promise对象中的API：
then（callback）;
catch(callback):捕捉到错误，执行callback回调函数;
4.all 与race：
all：接收一个 promise对象的数组作为参数，当这个数组里的所有promise对象全部变为resolve或reject状态的时候，它才会去调用 .then 方法。(指的是将所有任务都执行晚后才会执行then)
举例:

Promise.all([request.comment(), request.people()]);
request.comment()与request.people()会同时执行

race:
只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话，就会继续进行后面的处理。(race直白的解释就是赛跑，谁快谁先输出)

5.在项目中使用案例：
需求：先获取数据，然后将获取的数据赋值给某一个变量

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))

generator函数:

1.书写方式：在函数function关键字前面加一个*.
2.函数体有关键字：yield,后面跟每一个任务
3.通过next()调用，调用几次就几个任务执行

举例：

function* g1(){
yield '任务1'
yield '任务2'
yield '任务3'
return '任务4'
}
const g1done = g1()
console.log(g1done.next())
//任务1
console.log(g1done.next())
// 任务2

async:

1.async 属于es7新增函数.
2.书写格式：

async function aa(){
await '任务1'
await '任务2'
}

3.问题：
readFile(’./01-Promise.js’) 运行结果是Promise, 但是我们使用 async await之后，它的结果是具体的数据了？
4.分析：
async函数使用了generator函数的语法糖，它直接生成对象 {value: ‘’,done:false} await 直接将value提取出来了
5.实现：
将三层函数嵌套的第三层中的返回值返回来
6.扩展：
多层函数嵌套（异步执行），我们想把里层函数，一般情况出现在数据请求，我们将请求得到的数据返回出来

解决： Promise + async
7.案例：

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()

Node.js中的nextTick与setImmdiate

1.轮循解释：
node.js是事件驱动，有一个循环线程一直从事件队列中取任务执行或者I/O的操作转给后台线程池来操作,把这个循环线程的每次执行的过程算是一次轮询.
2.setImmdiate（）使用：
即使计算器立即执行：在事件轮循结束后执行。为了防止轮询阻塞,每次只会调用一个。
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()在每轮循环中执行链表中的一个回调函数.

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总结：

1.第三方的封装库。
2.暴露了一个async对象，该对象上有很多api.
3.api(多任务执行):
parallel,
serise
举例：
parallel：


async.parallel([
function(callback){
callback(null,'任务1')
},
function(callback){
callback(null,'任务2')
},
],(err,data)=>{
console.log('data',data)
})

serise:


async.series([
function(callback){
callback(null,'任务1')
},
function(callback){
callback(null,'任务2')
}
],(err,data)=>{
console.log('data',data)
})

yarn :除npm外另外一个包管理器。
使用方法：


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