前端异步流程工具

为什么要进行异步操作？
因为javascript是单线程语言 ，任务都是依次执行一个任务 但是任务有很多个，要想任务能够顺利执行，必须要排队
异步 就是将任务放到异步队列中，在主线程的任务执行之后 再去执行队列任务

前端异步操作方式：
传统方式：回调函数 ，事件
前端异步流程工具（封装出来函数/库）：
es6 Promise
es6 Generator函数
es6 -es8 async函数
Node中的异步处理工具（nextTick setImmdiate）
第三方库

---

1.promise：是Es6新增的异步编程的方法 使用new运算符创建promise的实例
里面有两个参数 参1：resolve代表成功 参2：reject代表失败
const promise=new Promise((resolve,reject)=>{

resolve('xixi')//如果成功了会讲resolve里面的参数传给then方法 

}).then((data)=>{//成功
console.log(data);

}).catch((error)=>{//失败
if(error) throw error //抛错 进程会被中断
})

const promise2=new Promise((resolve,reject)=>{

setTimeout(()=>{
    resolve('haha')
},2000)

}).then((data)=>{
console.log(data)
}).catch((error)=>{
if(error)throw error
})
// Promise.all([promise,promise2])//all是promise的新实例 参数是一个数组 需要数组里面所有的任务都陈工之后 才会执行下面的then方法下面的任务

// .then(()=>{
// console.log((‘hehe’));
// })

Promise.race([promise,promise2])//和all不一样 race是任务快的先执行 其他延时的任务后续进行

    .then(()=>{
        console.log('hehe')
    })

console.log(‘主线程’)

2.Generator 生成器函数

//generator 生成器函数

// function 后面跟着一个*号 定义generator函数
//函数内有个yield关键字是用来定义任务的

//例如：

function* fn(){
yield ‘任务一’
yield ‘任务二’
yield ‘任务三’
yield ‘任务四’
yield ‘任务五’

return '任务六'

}

//console.log(fn());
const hehe=fn()//赋给一个变量

for(let i=1 ;i<=6; i++){
console.log(hehe.next());
//带有一个next方法 这个方法是用来执行任务的
//返回的是一个对象 value属性 表示任务执行的结果
// done属性 表示总任务执行的状态 为布尔值 如果前面所有的任务都执行完成了就为true

}

---

3.async 函数

async function p1(){
const result=await ‘任务一’ //await等待任务一执行之后往后执行
return result
}

const p2 =async function(){
const result=await ‘任务二’ //await等待任务一执行之后往后执行
return result
}

const p3=async()=>{
const result=await ‘任务三’ //await等待任务一执行之后往后执行
return result
}

---

async 包
//async.js是一个是一个第三方包

//用于多任务执行

const {series,parallel}=require(‘async’);//解构赋值 引入第三方包

//series 表示串行

//parallel 表示并行

// 串行、并行：
// 指的是任务的执行方式。串行是指多个任务时，各个任务按顺序执行，完成一个之后才能进行下一个。并行指的是多个任务可以同时执行。异步是多个任务并行的前提条件

// series([
// function(a){
// a( null,‘任务一’)
// },
// function(a){
// // setTimeout(()=>{
// a(null,‘任务二’)
// //},2000)
// }
// ],function(error,result){
// console.log(‘任务六’)
// console.log(result)
// })

// setTimeout(()=>{
// console.log(‘xixi’);
// },1000)

// console.log(‘主线程’)

---

Node中的异步处理工具
process.nextTick（）
和 setImmediate（）
参数都是一个回调函数 ，但是nextTick执行在setImmediate的前面