前端异步流程工具

为什么要进行异步操作？
javascript是单线程，依次执行一个任务，要想让任务能够顺利进行，我们需要排队
异步就是将任务放入异步队列，在主线程执行结束之后再去执行
前端异步的操作方式
传统方式
回调函数
事件
前端异步流程工具 【 封装出来函数、库 】
es6 Promise
Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）
const p1 = new Promise(( resolve,reject ) => {
resolve( '任务一' )
})
.then( data => {
console.log( data )
})
.catch( error => {
if ( error ) throw error // 抛出一个错误，这个时候进程会被终端
})
Promise.all([promise实例1，promise实例2])
all中，一次执行任务，即使有延时任务，也必须等待延时任务结束，后续任务才能进行Promise
Promise.race() ,数组中一个promise实例完成即完成
race指的是 任务快 的先进行，其他延时任务后续进行
es6 Generator函数
function 关键字后面跟一个来定义一个generator函数
使用yield关键字来定义任务
function p1 () {
// yield 任务
yield '任务一'
yield '任务二'
return '任务六'
}

const task = p1() // 迭代器Iterator对象

console.log( task.next() ) // 通过next方法来遍历执行任务
console.log( task.next() ) // 通过next方法来遍历执行任务
// { value: '任务六', done: true }

/*
value 表示任务执行的结果
done 表示总任务执行状态
*/
es6 - es8 async 函数
async function p1 () {
const result = await '任务一'
return result
}
console.log( p1().then( res => console.log( res )) )
console.log(' 主线程')

async函数返回一个 Promise 对象。
async函数内部return语句返回的值，会成为then方法回调函数的参数。
async function f() {
return 'hello world';
}

f().then(v => console.log(v))
// "hello world"
上面代码中，函数f内部return命令返回的值，会被then方法回调函数接收到。
async函数内部抛出错误，会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。
async function f() {
throw new Error('出错了');
}

f().then(
v => console.log(v),
e => console.log(e)
)
// Error: 出错了
Node中的异步处理工具： nextTick setImmediate
javascript全局变量是window对象
Node.js全局变量是global
轮询的第一个是Process.nextTick()，中间是回调函数，最后一个是setImmediate(),所以Process.nextTick()比setImmediate()先执行
process.nextTick( () => {
console.log('A')
})

setImmediate(() => {
console.log('C')
})

console.log('主线程')

//结果顺序--主线程,A,C
第三方类库： async.js