js异步编程解决方案

最新推荐文章于 2022-11-08 20:20:33 发布

原创最新推荐文章于 2022-11-08 20:20:33 发布 · 684 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#generator #async #promise #异步编程

js 专栏收录该内容

8 篇文章

订阅专栏

本文总结了JavaScript中处理异步操作的解决方案，从传统的回调函数出发，探讨了Promise如何改善异步代码的可读性和错误处理，并介绍了Generator和Async函数作为更现代的解决方案。

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

这里所说的异步解决方案，主要针对了多个异步操作，并且异步操作之间相互依赖，这里总结一下解决方案。

1、回调函数

这是最古老的方法，尽管能解决异步相互依赖的情况，但是当异步操作过多，多层嵌套的回调函数会让代码可读性非常差，也不够优雅，另外也没有比较好的错误处理机制，例如：

$.get(path1,function(data1){
	$.get(path2,function(data2){
		$.get(path3,function(data3){
			console.log('done');
		});
	});
});

接下来是es6之后提出的一些解决方案：

2、promise

简单来说是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

promise对象有两个特点：

①对象的状态不受外界影响，有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败），只有异步操作的结果，才能决定当前是哪种状态

②一旦状态发生改变，就不会再产生变化（pending-fulfilled，pending-rejected），这时候就称为resolved，如果改变已经发生，再给promise对象添加回调函数，也能得到结果，这与回调函数不同，回调函数的事情一旦错过，再去监听，是不会得到结果的

举个例子：

const p = new Promise((resolve,reject) => {
	$.get(path1,data1 => {
		resolve(data1);
	});
});
p.then(value => {
	console.log(value);//data1
});

上述promise对象新建后就会立刻执行，之后可以选择任何时候添加回调。

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

3、generator

4、async函数