前端异步流程工具

最新推荐文章于 2024-07-30 10:51:46 发布

原创最新推荐文章于 2024-07-30 10:51:46 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

本文详细探讨了异步编程的多种方法，包括回调函数、事件、Promise、Generator函数及async/await的使用，对比了它们的优缺点，并通过具体实例展示了如何在Node.js中运用这些技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

传统的方案：

回调函数
事件

工具的方案：

1. Promise

ES6 原生提供了 Promise 对象。
所谓 Promise，就是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理。
Promise 对象有以下两个特点。
（1）对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。
（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易
Promise 也有一些缺点。
首先，无法取消 Promise，一旦新建它就会立即执行，无法中途取消。
其次，如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。
第三，当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

1. 通过new Promise()

2. Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是 resolve 方法和 reject 方法。

resolve也是一个函数，函数中接收参数，参数为任务
resolve 中任务主线程，而then中任务是放在异步队列中的，执行在主线程之后

3. Promise对象的api

then(callback)
catch(cb)

4. all race

all([value1,value2])
指的是将数组中所有的任务执行完成之后，才执行.then 中的任务
race表示赛跑，谁快，谁输出
项目中使用：
需求：先获取数据，然后将获取的数据赋值给某一个变量

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

5.举例

    const request = require('request')
    const obj = {
    data: null
    }
    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))
    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'))
    Promise.race([p1,p2])
    .then(()=>{console.log('done~~')})

2. gengerator函数

es6 提供的 generator函数

在function关键字后加一个* ，那么这个函数就称之为generator函数
函数体有关键字 yield ，后面跟每一个任务，也可以有return关键字，保留一个数据
通过next函数调用，几个调用，就是几个人任务执行

案例

 function* g1(){
        yield '任务1'
        yield '任务2'
        yield '任务3'
        return '任务4'
        }
        const g1done = g1()
        console.log(g1done.next())
        console.log(g1done.next())

3. async await

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. 扩展：

多层函数嵌套（异步执行），我们想把里层函数，一般情况出现在数据请求，我们将请求得到的数据返回出来

实例

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

4. node.js nextTick setImmidate

nextTick vs setImmediate

轮询：

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观察者.
在具体实现上,process.nextTick()的回调函数保存在一个数组中,
setImmediate()的结果则是保存在链表中.
在行为上,process.nextTick()在每轮循环中会将数组中的回调函数全部执行完.
而setImmediate()在每轮循环中执行链表中的一个回调函数.

4.实例与思考

    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('主线程')

5. 第三方库 async.js

总结：

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

除了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

实例

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

对比： Promise vs gengerator vs async

promise写法比回调函数的写法改进了很多，但是代码是promise API,操作本身的语义不易看出；
Generator语义比promise清晰，用户必须有一个任务执行器自动执行Generator函数；
async实现最简洁，最符合语义，将Generator写法中的自动执行器改在语言层提供，不暴露给用户；

Async/await是近些年来JavaScript最具革命性的新特性之一。下边列举一下其优点

1、简约而干净Concise and clean（不需要then，catch）
2、错误处理Error handling（Promise内部的错误，我们只能再嵌套一层try/catch，用await就可以解决）
3、条件判别Conditionals（我们需要先拉取数据，然后根据得到的数据判断是否输出此数据，或者根据数据内容拉取更多的信息。需要嵌套多层，写法辣眼睛）
4、多个promise连接时，写法嵌套多层（改进promise.all）
5、链式调用了很多promise,出错时log信息不明朗
6、不能打断点（在一个返回表达式的箭头函数中，我们不能设置断点）