前端异步流程工具的方案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