一文带你掌握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异步编程内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

require.js的用法详解
本文给大家介绍require.js的用法，require.js的诞生是为了解决两大问题，第一实现js文件的异步加载，避免网页失去响应，第二管理模块之间的依赖性，便于代码的编写和维护，对require.js用法感兴趣的朋友可以参考下本篇文章
2015-10-10
JS实现的打字机效果完整实例
这篇文章主要介绍了JS实现的打字机效果,结合完整实例形式分析了javascript定时触发自定义函数模拟打字输出效果的相关实现技巧,需要的朋友可以参考下
2016-06-06
uniapp小程序配置tabbar底部导航栏实战指南
tabBar如果应用是一个多tab应用,可以通过tabBar配置项指定tab栏的表现,以及tab切换时显示的对应页,下面这篇文章主要给大家介绍了关于uniapp小程序配置tabbar底部导航栏的相关资料,需要的朋友可以参考下
2022-09-09
全面解析Bootstrap中tooltip、popover的使用方法
这篇文章主要为大家详细解析了Bootstrap中tooltip、popover的使用方法，了解提示框、弹出框的实现原理，感兴趣的朋友可以参考一下
2016-06-06
原生JS实现拖拽位置预览
这篇文章主要为大家详细介绍了原生JS实现拖拽位置预览，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
es6数组的flat()，flatMap()函数用法实例分析
这篇文章主要介绍了es6数组的flat()，flatMap()函数用法,结合实例形式分析了es6数组的flat()，flatMap()函数基本功能、使用方法及操作注意事项,需要的朋友可以参考下
2020-04-04
2026前端面试题及答案总结大全(最新版)
这篇文章主要介绍了2026前端面试题及答案总结的相关资料,通过示例代码讲解了HTML/CSS盒模型、CSS选择器优先级计算、块级格式化上下文、JavaScript事件循环机制、ES6中变量声明差异、Promise原理及实现、React与Vue响应式机制与性能优化手段等内容,需要的朋友可以参考下
2026-06-06
JS实现登录页面记住密码和enter键登录方法推荐
下面小编就为大家带来一篇JS实现登录页面记住密码和enter键登录方法推荐。小编觉得挺不错的，现在分享给大家，也给大家做个参考。
2016-05-05
Angular组件拿不到@Input输入属性问题探究解决方法
最近在工作中实现一个feature的时候，碰到一个小问题：Angular组件拿不到@Input输入属性的问题，尽管对这些问题都比较了解，但是找问题是需要一个过程的，所以还是把这个问题总结记录了下
2023-01-01
JS计算距当前时间的时间差实例
下面小编就为大家分享一篇JS计算距当前时间的时间差实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-12-12