前端异步流程工具

前端异步流程工具

为什么要进行异步操作？javascript是单线程，依次执行一个任务，要想让任务能够顺利进行，所以我们需要排队

异步就是将任务放入异步队列，在主线程执行结束之后再去执行

前端异步的传统操作方式有两种分别是回调函数和事件

前端异步流程的工具有

es6 Promise

const p1 = new Promise((resolve,reject)=>{
    resolve('任务一')
}).then((data)=>{
    console.log(data)
})

const p2 = new Promise((resolve,reject)=>{
        resolve('任务二')
}).then((data)=>{
    console.log(data)
})
console.log('主线程')
//输出结果为 
//主线程
//任务一
//任务二

Promise.all()方法按顺序执行 遇到延迟等待结束继续执行

const p1 = new Promise((resolve,reject)=>{
    resolve('任务一')
}).then((data)=>{
    console.log(data)
})

const p2 = new Promise((resolve,reject)=>{
    setTimeout(() => {
        resolve('任务二')
    }, 2000);
    
}).then((data)=>{
    console.log(data)
})
Promise.all([p1,p2])
.then(()=>{
    console.log('任务三')
})
//输出结果为 
//主线程
//任务一
//任务二   输出任务二前延迟2s
//任务三

Promise.race()方法谁快先执行谁，延迟的最后输出

const p1 = new Promise((resolve,reject)=>{
    resolve('任务一')
}).then((data)=>{
    console.log(data)
})

const p2 = new Promise((resolve,reject)=>{
    setTimeout(() => {
        resolve('任务二')
    }, 2000);
    
}).then((data)=>{
    console.log(data)
})
Promise.race([p1,p2])
.then(()=>{
    console.log('任务三')
})
console.log('主线程')
//输出结果为 
//主线程
//任务一
//任务三   输出任务二前延迟2s
//任务二

es6 Generator函数

Generator生成器函数。顾名思义，它是一个生成器，它也是一个状态机，内部拥有值及相关的状态，生成器返回一个迭代器Iterator对象，我们可以通过这个迭代器，手动地遍历相关的值、状态，保证正确的执行顺序

.next()输出对象 按顺序的执行

{done: false, value: 1}done表示是否执行完成value表示yield后对应的值

声明比普通函数多了个*号 函数内使用yield关键字

function* a() {
    yield 1;
    yield 2;
    return 3';
}

var show = a();

show.next() // {done: false, value: 1}
show.next() // {done: false, value: 2}
show.next() // {done: true, value: 3}
show.next() // {done: true, value: undefined}

.next()话可以出传参

function* gen(){
    yield 1;
    yield 2;
   var one= yield 3*one;
    yield 3*one;
}

var g=gen();
console.log(g.next().value)//1
console.log(g.next())//{ value: 2, done: false }
console.log(g.next())//{ value: NaN, done: false }
console.log(g.next(6).value)//18

es6 - es8 async 函数

async function p1(){ 
const result  =await '任务一'
return result
}

const p2 = async function () { 
    const result=await '任务二'
    return result
 }

 const p3 =async ()=>{
     const result = await '任务三'
     return result 
 }
 console.log(p1().then((data)=>{console.log(data)}))
 console.log(p2().then((data)=>{console.log(data)}))
 console.log(p3().then((data)=>{console.log(data)}))
 console.log('主线程')
//输出
//Promise { <pending> }
//Promise { <pending> }
//Promise { <pending> }
//主线程
//任务一
//任务二
//任务三

内层请求数据 外层通过promise获取数据

const request =require('request')
    const p1=new Promise((resolve,reject)=>{//外层promise获取
        request('https://m.lagou.com/listmore.json',(a,b,c)=>{//内层request请求数据
            resolve(c)
        })
        
    })
      
 
module.exports =p1//暴露模块  其他地方直接引用该模块惊醒数据获取

调用数据

const static=require('./static.js')//获取暴露的模块
console.log(static.then((c)=>{//.then（）方法获取数据
    console.log(c)//输出数据
}))
//小程序获取数据

const static=require('./static.js')//获取暴露的模块
const p1 =async()=>{ //async  await获取数据
    const result = await static
    console.log(result)
}
console.log(p1())
//vue  react  angular  获取数据

Node.js中的异步流程工具 Process.nextTick() setImmediate();

javascript全局变量是window对象

Node.js全局变量是什么？ global

nextTick()的回调函数执行的优先级要高于setImmediate();

process.nextTick(()=>{
    console.log('任务一')
})
setImmediate(()=>{
    console.log('任务二')
})
process.nextTick(()=>{
    console.log('任务三')
})
//任务一
//任务三
//任务二