一文带你掌握JavaScript异步编程的五种方式

更新时间：2025年07月01日 08:19:45 作者：程序员小寒

异步可以理解为把一个任务分成了两段,先执行第一段,转而去执行其它任务,等准备完毕后,再回过头来执行第二段, 本文主要来和大家聊聊JavaScript异步编程的五种方式,感兴趣的可以了解下

1、什么是异步？

异步可以理解为把一个任务分成了两段，先执行第一段，转而去执行其它任务，等准备完毕后，再回过头来执行第二段。

比如发一个 http 请求，第一段就是创建 XMLHttpRequest 对象，做好请求配置后向后端发送请求，然后就去执行其他任务(其它 js 代码)了，第二段就是拿到后端响应后，执行对应的回调函数。

这种不连续的执行，叫做异步，反之，连续的执行，叫做同步。

2、高阶函数

在 js 中，函数是一等公民。所谓一等公民，就是指函数能和数据类型一样，可以赋值给变量，也可以作为函数的参数和返回值。而传入的参数中或者返回值中带有函数的，就被称为高阶函数。

3、高阶函数的作用

3.1 可以批量生成函数

function isType(type) {
  return (obj) => {
    return Object.prototype.toString.call(obj) === `[object ${type}]`;
  };
}

const isFunc = isType("Function");
const isBoo = isType("Boolean");

通过高阶函数isType，可以生成不同类型的判断函数，判断各种对象类型。

3.2 可以用于多次调用才执行的函数

function after(time, callback) {
  let count = 0;
  return function() {
    if (++count === time) {
      callback.apply(this, arguments);
    }
  };
}
const f = after(3, function() {
  console.log("callback");
});
f();

after函数的作用是，在调用f函数三次之后，才会执行回调函数callback。

4、异步编程的五种实现方式

回调函数
事件监听，发布订阅
Promise
generator/yield
async/await

4.1 回调函数

回调函数是指将异步的第二段放在回调函数里面，等准备完毕后，执行回调。

const fs = require("fs");
fs.readFile("./1.txt", "utf8", function(err, data) {
  console.log(err, data);
});

回调函数的问题：

1.异常处理麻烦

异步代码不能用 try catch 捕获异常，所以如果出错了要向回调函数传入异常供调用者判断。比如在 nodejs 中，对异常处理有一个约定，会将异常作为回调的第一个参数返回，如果为 null 则表示没有出错。

2.容易形成回调地狱

异步多级依赖的情况下代码会嵌套的很深，不利于阅读和维护。

const fs = require("fs");
fs.readFile("./1.txt", "utf8", function(err1, result1) {
  fs.readFile(result1, "utf8", function(err2, result2) {
    fs.readFile(result2, "utf8", function(err3, result3) {
      console.log(result3);
    });
  });
});

4.2 事件发布/订阅模型

发布/订阅是一种设计模式，它依赖于一个事件调度中心，先注册事件名和回调(on)，然后可以主动触发(emit)。

const EventEmitter = require("events");
// eve为事件调度中心
const eve = new EventEmitter();
eve.on("first", function() {
  console.log("first");
});
eve.emit("first");

4.3 Promise

Promise 本意是承诺，在程序中的意思就是承诺我过一段时间后给你一个结果，而过一段时间指的就是异步操作，比如网络请求、定时器，读取文件等。

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("success");
  }, 1000);
});
p.then((result) => {
  // 1秒后打印success
  console.log(result);
});

4.4 Generator/yield

Generator函数是ES6提供的一种异步编程解决方案。

语法上：可以将它理解为一个状态机，其内部封装了多种状态。执行Generator函数会返回一个遍历器对象，可以依次迭代Generator函数内部的每一个状态，也被称为迭代器。

1.Generator的使用

function *test() {
    const first = yield 1
    console.log(first)
    const second = yield 2
    console.log(second)
}
const it = test()
console.log(it.next())
console.log(it.next('first'))
console.log(it.next('second'))
// { value: 1, done: false }
// first
// { value: 2, done: false }
// second
// { value: undefined, done: true }

注意：第一次调用next传递参数没有意义，done的值为false表示函数调用结束了

形式上，Generator函数相对于普通函数而言，多了两个特性。一是function 关键字和函数名之间有一个星号，函数内部使用yield表达式，定义不同的内部状态。yield的意思是产出，可以将状态传递出去。

2.CO

co 是一个为nodejs和浏览器打造的基于生成器的流程控制工具，借助Promise，可以使用更加优雅的方式编写非阻塞代码。

const fs = require('fs')
function readFile(filename) {
    return new Promise((resolve, reject) => {
        fs.readFile(filename, 'utf8', (err, data) => {
            err ? reject(err) : resolve(data)
        })
    })
}
/** 文件1.txt里面的内容是2.txt 
 *  文件2.txt里面的内容是222
*/
function *read() {
    const filename = yield readFile('1.txt')
    const result = yield readFile(filename)
    return result
}
co(read).then(result => {
    console.log(result)
}).catch(err => {
    console.log(err)
})
// 最终打印222

co 实现原理如下：

// co实现原理
function co(gen) {
    const it = gen()
    return new Promise((resolve, reject) => {
        !(function next(nextValue) {
            const { value, done } = it.next(nextValue)
            if (!done) {
                value.then(next, reject)
                
            } else {
                resolve(value)
            }
        })()
    })
}

4.5 async/await

async/await 是 ES7 的语法，是js异步编程的终极解决方案。可以理解为是Promise+Generator的语法糖，可以轻松做到Generator和co所做到的工作。

const fs = require('fs')
function readFile(filename) {
    return new Promise((resolve, reject) => {
        fs.readFile(filename, 'utf8', (err, data) => {
            err ? reject(err) : resolve(data)
        })
    })
}
async function read() {
    const filename = await readFile('1.txt')
    const result = await readFile(filename)
    return result
}
read().then(result => {
    console.log(result)
})

优点：

内置执行器，内部会帮你进行迭代。
更好的语义，代码结构清晰
更广的适用性，await后面不一定要跟promise

缺点：

滥用await会导致性能问题，因为await会阻塞代码，也许后者不一定依赖前者，但仍需要等待前者完成，导致代码失去了并发性。
错误处理麻烦，项目中可以用axios拦截器处理错误或者用try catch来捕获错误。
经过babel编译后的代码臃肿。

到此这篇关于一文带你掌握JavaScript异步编程的五种方式的文章就介绍到这了,更多相关JavaScript异步编程内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

用 js 写一个 js 解释器过程详解
这篇文章主要介绍了用 js 写一个 js 解释器过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-08-08
javascript input输入框模糊提示功能的实现
这篇文章主要介绍了javascript input输入框模糊提示功能的实现的相关资料,希望通过本能帮助到大家，需要的朋友可以参考下
2017-09-09
JS脚本实现动态给标签控件添加事件的方法
这篇文章主要介绍了JS脚本实现动态给标签控件添加事件的方法,结合实例形式分析了javascript添加事件监听的相关实现技巧,需要的朋友可以参考下
2016-06-06
JavaScript日期格式化技巧分享
在 JavaScript 中,日期和时间的处理与格式化是非常常见的需求,JavaScript 提供了内置的 Date 对象用于操作日期和时间,但它的格式化功能较为有限,为了更方便地格式化日期,通常需要结合一些额外的工具或库,本文涵盖了从基础到进阶的日期格式化技巧
2024-10-10
threejs使用canvas更新纹理代码实例
在使用three.js开发的过程中,我们常常使用canvas来作为纹理贴图,下面这篇文章主要介绍了如何基于Three.js在三维场景中使用Canvas更新纹理,通过实现思路和代码样例,帮助读者掌握这一技能,需要的朋友可以参考下
2024-12-12
使用 Opentype.js 生成字体子集的实例代码详解
这篇文章主要介绍了使用 Opentype.js 生成字体子集,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-05-05
JavaScript 读取元素的CSS信息的代码
在前端开发的工作中，总是会涉及到一些JavaScript和CSS信息交互的内容。
2010-02-02
JavaScript实现256色转灰度图
本文主要介绍了JavaScript实现256色转灰度图的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
JavaScript WebAPI、DOM、事件和操作元素实例详解
这篇文章主要给大家介绍了关于JavaScript WebAPI、DOM、事件和操作元素的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友可以参考下
2021-06-06
微信小程序实现简单跑马灯效果
这篇文章主要为大家详细介绍了微信小程序实现简单跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12