前端异步方法总结

1.传统的方案：

1. 回调函数
2. 事件

2.工具的方案：

1. Promise
2. gengerator函数
3. async await
4. node.js nextTick setimmediate
5. 第三方库 async.js

promise

1. 参数是一个回调函数， 回调函数中有两个参数 （resolve reject）
   * resolve也是一个函数， 函数中接收参数， 参数为任务
   * resolve 中任务主线程 ， 而then中任务是放在异步队列中的，执行在主线程之后
   即：Promise对象 新建后立即执行，所以首先输出的是Promise。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行
   项目中使用：
   先获取数据，然后将获取的数据赋值给某一个变量

   const p3 = new Promise((resolve,reject)=>{
   request('http://api.douban.com/v2/movie/in_theaters',(err,res,data)=>{
   resolve(data)
   })
   }).then((data)=>{
   obj.data = data
   }).then(()=>console.log(obj.data))
   

Promise对象的api

then(callback)
catch(cb)
all
race

1. p=Promise.all([p1,p2,p3]) 数组里面可以接收多个promise实例
   指的是将数组中所有的任务执行完成之后， 才执行.then 中的任务
   注：p1,p2,p3都是promise实例
   1. 只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
   2. 只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

    const p1 = new Promise((resolve, reject) => {
   setTimeout(() => {
   resolve(console.log('p1 任务1'))
   }, 1000)
   })
   .then(data => {
   console.log('p1 任务2')
   })
   .then(res => {
   console.log('p1 任务3')
   })
   .catch(err => { throw err })
   const p2 = new Promise((resolve, reject) => {
   resolve(console.log('p2 任务1'))
   }).then(
   data => {
   console.log('p2 任务2')
   }
   ).catch(
   err => {
   throw err
   })
   Promise.all([p1, p2])
   .then(() => console.log('done'))
   //输出结果
   p2 任务1
   p2 任务2
   p1 任务1
   p1 任务2
   p1 任务3
   done
   

2. race([p1,p2,p3])
   表示赛跑， 谁快， 谁输出,Promise.race方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。

   
   const p1 = new Promise((resolve, reject) => {
   setTimeout(() => {
   resolve(console.log('p1 任务1'))
   }, 1000)
   })
   .then(data => {
   console.log('p1 任务2')
   })
   .then(res => {
   console.log('p1 任务3')
   })
   .catch(err => { throw err })
   const p2 = new Promise((resolve, reject) => {
   resolve(console.log('p2 任务1'))
   }).then(
   data => {
   console.log('p2 任务2')
   }
   ).catch(
   err => {
   throw err
   }
   )
   Promise.race([p1, p2])
   .then(() => { console.log('done~~') })
   //输出结果为
   p2 任务1
   p2 任务2
   done~~
   p1 任务1
   p1 任务2
   p1 任务3
   

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()) //这里有多少个next函数被调用，就会执行到第几个任务
//运行结果
{ value: '任务1', done: false }
{ value: '任务2', done: false }
当所有任务执行完之后，一直到任务4，其值会变为
{ value：任务4，done: true }

es7新增的 async函数

1. 格式

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

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

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

解决： Promise + async

const fs = require('fs')
const readFile = (filename) => {
//返回一个promise实例
return new Promise((resolve, reject) => {
fs.readFile(filename, (err, data) => {
resolve(data.toString())
//data.tostring（）方法将二进制转换成正常的输出
})
})
}
const asyncFn = async() => {
const f1 = readFile('./01-Promise.js').then(data => data) // {value: '', done: false}
//这个输出的是promise对象
async函数使用了generator函数的语法糖
， 它直接生成对象
{value: '',done:false}
// const f1 = await readFile('./01-Promise.js')
//这个是完整的提取出来了文件内容
await 直接将 value提取出来了
const f2 = await readFile('./02-generator.js')
console.log(f1)
console.log(f2)
}
asyncFn()

nextTick vs setImmediate

轮询：

1. nodejs中是事件驱动的，有一个循环线程一直从事件队列中取任务执行或者
   I/O的操作转给后台线程池来操作,把这个循环线程的每次执行的过程算是一次轮询.

2. setImmediate()的使用
   即时计时器立即执行工作，它是在事件轮询之后执行,为了防止轮询阻塞,每次只会调用一个。

3. Process.nextTick()的使用
   它和setImmediate()执行的顺序不一样，它是在事件轮询之前执行，为了防止I/O饥饿，所以有一个默认process.maxTickDepth=1000来限制事件队列的每次循环可执行的nextTick()事件的数目。

总结：

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('主线程')
//结果输出为
主线程
A
B
D
E
G
c
F
H

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)
})
const async = require('async')
const fs = require('fs')
console.log( async )
async.map(['./01-Promise.js','./02-generator.js'],fs.stat,(err,result)=>{
if(!err){
console.log( result )
}else{
throw err
}
})
async.series([
function(callback){
callback(null,'任务1')
},
function(callback){
callback(null,'任务2')
}
],(err,data)=>{
console.log('data',data)
})
async.parallel([
function(callback){
callback(null,'任务1')
},
function(callback){
callback(null,'任务2')
},
],(err,data)=>{
console.log('data',data)
})

前端异步流程控制工具

1. Promise
   https://blog.csdn.net/MrJavaweb/article/details/79475949
2. Generator
   https://www.cnblogs.com/imwtr/p/5913294.html
3. Async-await
4. Node.js 中的nextTick()和setimmediate()
   https://www.cnblogs.com/5ishare/p/5268273.html
5. async库
   https://caolan.github.io/async/
   参考文档
   Event-loop
   http://www.ruanyifeng.com/blog/2014/10/event-loop.html?bsh_bid=983729729
   史上最易读懂的 Promise/A+ 完全实现
   https://zhuanlan.zhihu.com/p/21834559

最后

以上就是鳗鱼铅笔为你收集整理的前端异步方法总结的全部内容，希望文章能够帮你解决前端异步方法总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。