ES6学习之更优的异步编程方案 Promise

最新推荐文章于 2025-07-26 15:11:48 发布
原创 最新推荐文章于 2025-07-26 15:11:48 发布 · 218 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #es6/es7

本文深入讲解Promise对象的创建、状态转换、链式调用、异常处理等核心概念，通过实例演示Promise的执行流程与特性，帮助读者掌握Promise的高级用法。

Promise译为“承诺”。
用于向执行者（Promise实例）交待一件任务，当任务结束，应如何处理。

使用

new Promise(function(resolve,reject){})

创建promise实例需传入一个函数，函数定义了兑现承诺的逻辑（如何处理）。
函数中的参数定义两个结果的调用：

  1. 变更任务状态为Fulfilled成功或Rejected失败。
  2. 将信息作为参数传入，成功信息、失败原因等，使回调方法可以接收：成功被then接收，失败被catch接收。

状态

三种状态：pending(初始状态)，fulfilled(resolved)(成功)，rejected(失败)
promise对象创建即执行传入的函数，执行函数中的回调即变更promise的状态

打印Promise对象：Promise {<状态>[: 回调传参]}

// pending
var p1 = new Promise(function(resolve, reject){
	setTimeout((
		  resolve("success")
	)=>{},500);
});
console.log(p1); // Promise {<pending>}

// resolved/fulfilled
var p2 = new Promise(function(resolve, reject){
	  resolve("success")
});
console.log(p2); // Promise {<resolved>:"success"}

// rejected
var p3 = new Promise(function(resolve, reject){
	  resolve("success")
});
console.log(p3); // Promise {<rejected>:"success"}

状态不可逆

状态变更只能是pending->resolved或pending->rejected
状态一旦变更，执行回调不会生效。

var p1 = new Promise(function(resolve, reject){
	  reject("error"); // 状态变更
	  reject("error2"); // 未生效
	  resolve("success"); // 未生效
});
console.log(p1); // Promise {<rejected>:"error"}
p1.catch(err=>{
	console.log(err); // error
})

执行顺序特点

  1. 一旦新建就会立即执行
  2. 在 JavaScript 事件队列的当前运行完成之前，(resolve, reject)回调函数永远不会被调用。
var p1 = new Promise(function(resolve, reject){
	console.log(1);
	resolve("success");
	console.log(2);
});
console.log(3)
p1.then(data=>{
	console.log(4)
})
console.log(5)
setTime(()=>{
	console.log(6)
},50);
// 输出顺序：1 2 3 5 4 6

then()

then返回一个新的promise对象

var p1 = new Promise((resolve,reject) => {
	setTimeout(()=>{
		resolve('success');
	},1000);
})
var p2 = p1.then(() => {
	throw new Error('this is an error');
})
p2.catch(err=>{console.log(err.message);});
console.log('p1',p1)
console.log('p2',p2)
setTimeout(() => {
	console.log('p1',p1)
	console.log('p2',p2)
},2000);
/*输出
p1 Promise {<pending>}
p2 Promise {<pending>}
this is an error
p1 Promise {<resolved>:"success">}
p2 Promise {<rejected>:Error:this is an error>}
*/

链式调用

var p1 = new Promise((resolve,reject)=>{
	resolve(1);
});
p1.then(value=>{
	console.log(value); // 输出：1
	return value*2; // 作为下一次调用then回调的参数
}).then(value=>{
	console.log(value); // 输出：2
}).then(value=>{ // 上一次then未return，所以参数为undefined
	console.log(value); // 输出：undefined
	return Promise.resolve('resolve'); // 返回一个状态为resolved的promise，且resolve回调传参为resolve
	/* 类似于
	return new Promise((resolve,reject)=>{
		resolve('resolve');
	})
	*/
}).then(value=>{
	console.log(value); // 输出：resolve
	return Promise.reject('reject');
}).then(value=>{ // 由于上一次then返回的是状态为reject的promise，所以直接触发catch
	console.log(value); // 不会执行
}).catch(error=>{
	console.log(error); // 输出：reject
})

异常

  • 创建及操作中的异常，如果定义了catch，就会执行catch回调，否则会抛出错误。
  • Promise 对象的错误具有"冒泡"性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个 catch 语句捕获。
  • 错误处理完，会继续执行后面的操作，并将catch的return作为下次函数执行的参数。

定义：以下几种定义异常回调在处理创建promise异常时效果一样。注意catch只会处理上一次操作的错误。比如.then(func1,catch1).then(func2,catch2)中func1中的错误由catch2处理，catch1不会触发。

var p1 = new Promise((resolve,reject)=>{
	foo.bar();
	resolve('success');
});
var catchFunc = err=>{};
p1.then(null, catchFunc);
p1.then(()=>{}, catchFunc);
p1.then(()=>{}).then(()=>{}).catch(catchFunc);
p1.then(()=>{}).then(()=>{},catchFunc);
p1.catch(catchFunc);

触发：

  1. 执行代码中的异常会触发下次then的第二个函数参数(reject)或catch。例如上例的foo.bar()
  2. 创建promise时状态变更为rejected时会触发。
  3. 在创建promise时执行的代码有错误，类似执行了reject(err.message)。若错误在状态变更前，则直接变更promise的状态为rejected，并且如果未定义reject回调(catch)就会抛出错误；若在状态变更后，虽然会中断后面代码的执行，由于状态已变更，则reject(err.message)不会生效，所以也不会抛出错误。

处理：

  1. 异常处理完，then/catch返回的promise对象会继续执行链式调用
  2. 若由代码错误导致的异常，导致执行中断

示例1：

var p1 = new Promise((resolve,reject)=>{
	foo.bar();
	resolve('success');
});
console.log(p1);
/*输出：
Promise {<rejected>: ReferenceError: foo is not defined}
*/
/*抛出错误：
Uncaught (in promise) ReferenceError: foo is not defined
*/


var p1 = new Promise((resolve,reject)=>{
	foo.bar();
	resolve('success');
});
p1.catch(err=>{
	console.log(err.message);
})
console.log(p1);
/*定义了catch，不会抛出错误，输出：
Promise {<rejected>: ReferenceError: foo is not defined}
ReferenceError: foo is not defined
*/

var p1 = new Promise((resolve,reject)=>{
	resolve('success');
	foo.bar();
});
console.log(p1);
/*状态已变更，后面的异常不会生效，也不会抛出错误。输出：
Promise {<resolved>: "success"}
*/

示例2：

由于创建promise代码中报错，导致两件事情：

  1. promise状态变更为rejected，类似执行了 reject(err.message)
  2. 代码中断，未执行后面的代码
var p1 = new Promise((resolve,reject)=>{
	foo.bar();
	console.log(1);
	resolve('success');
	console.log(2);
});
p1.then(value=>{
	console.log(value);
}).catch(err=>{
	console.log(err.message);
	console.log(p1);
});
/* 输出
ReferenceError: foo is not defined
Promise {<rejected>: ReferenceError: foo is not defined}
*/

示例3：

错误具有冒泡性质，总会被下一个catch捕获
错误处理完会继续执行后面的then

var p1 = new Promise((resolve,reject)=>{
	foo.bar();
	resolve('success');
});
p1.then(value=>{
	console.log('then1:' + value);
},err=>{
	console.log('catch1_error:'+err.message);
	return 'catch1_return';
}).catch(err=>{
	console.log('catch2_error:'+err.message);
	return 'catch2_return';
}).then(value=>{
	// then2_foo.bar(); // 若在此处执行错误代码，则会中断后面代码的执行
	console.log('then2:' + value);
	then2_foo.bar();
}, err=>{
	console.log('catch3_error:'+err.message)
}).catch(err=>{
	console.log('catch4_error:'+err.message);
});
/* 输出
catch1_error:ReferenceError: foo is not defined
then2:catch1_return
catch4_error:ReferenceError: then2_foo is not defined
*/

then回调异步性

p1.then(
  function(value){
    console.log('p1 then1');
  }
).then(
  function(value){
    console.log('p1 then2');
  }
).then(
  function(value){
    console.log('p1 then3');
  }
);

var p2 = new Promise(function(resolve,reject){
  resolve();	
});

p2.then(
  function(value){
    console.log('p2 then1');
  }
).then(
  function(value){
    console.log('p2 then2');
  }
).then(
  function(value){
    console.log('p2 then3');
  }
);
/*输出：
p1 then1
p2 then1
p1 then2
p2 then2
p1 then3
p2 then3
*/

拆箱

Promise.resolve(data)
data如果是正常的值（字符串等），Promise.resolve会返回一个以data为参数的状态为resolved的promise对象。
data如果是一个promise对象，就会拆箱获取对这个对象的状态和值（拆箱过程是异步的），最终返回状态为resolved或rejected的对象。

Promise.reject(data)
不会进行拆箱操作，总是会返回一个状态为rejected的promise对象，并将data作为参数调用。

var p0 = new Promise((resolve,reject)=>{
	resolve(Promise.resolve('resolve'));
});
var p1 = new Promise((resolve,reject)=>{
	resolve(Promise.resolve(p0));
});
var p2 = new Promise((resolve,reject)=>{
	resolve(Promise.reject('reject'));
});
var p3 = new Promise((resolve,reject)=>{
	reject(Promise.resolve('resolve'));
});
p0.then(value => {
	console.log('p0_resolved:' + value);
}, err => {
	console.log('p0_rejected:' + err);
})
p1.then(value => {
	console.log('p1_resolved:' + value);
}, err => {
	console.log('p1_rejected:' + err);
})
p2.then(value => {
	console.log('p2_resolved:' + value);
}, err => {
	console.log('p2_rejected:' + err);
})
p3.then(value => {
	console.log('p3_resolved:' + value);
}, err => {
	console.log('p3_rejected:' + err);
})
/*输出：
p3_rejected:[Object:Promise]
p1_resolved:resolve
p2_rejected:reject
*/

p0 p1 p2中resolve需要拆箱，p3中的reject不需要拆箱，所以p3最先输出
p1中Promise.resolve(p0)依然需要拆箱，所以p0 p2先输出

其他

  1. .then 或 .catch 返回的值不能是 promise 本身，否则会造成死循环
  2. .then 或者 .catch 的参数期望是函数，传入非函数则会发生值穿透。

参考

八段代码彻底掌握 Promise
JavaScript Promise 对象
Promise 必知必会（十道题）

《异步编程之美》— 全栈修仙《Java 8 CompletableFuture 对比 ES6 Promise 以及Spring @Async》
m0_68921558的博客
01-08 988
在平常开发过程中会遇到许多意想不到的坑，本篇文章就记录在开发过程中遇到一些常见的问题，看了许多博主的异步编程，我只能说一言难尽。在Promise返回给调用者的时候，操作往往还没有完成，但Promise对象可以让我们操作最终完成时对其进行处理（无论成功还是失败）Promise是现代JavaScript中异步编程的基础，是一个由异步函数返回的可以向我们指示当前操作所处的状态的对象。类似与前端Promise代表异步对象，类似Java中的CompletableFuture。
ES6---JS异步编程的几种解决方法及其优缺点
wzjfloor的博客
07-09 1万+
前言因项目需要从LiveScript转为ES6, 所以最近看了阮一峰的ES6教程，主要感兴趣的是ES6对JS的异步编程新的解决方案，ES6增加了promise和Generator等解决方法。现在我们来大致理清一下到ES6为止的JS异步解决的思路以及他们各自的优缺点。起因我们都知道JS是单线程的，这也正是异步编程对于JS很重要的原因，因为它无法忍受耗时太长的操作。 正因如此有一系列的实现异步的方法方法
怎么理解new Promise(function (resolve, reject){}）中函数的参数resolve和reject
qq_27361945的博客
11-07 2万+
先总结：参数resolve和reject的作用是将Promise中函数要传递的值，作为参数传给后面的then和catch中函数。 resolve（值1）把值1传给promise，然后再由promise把值1传给then（function（值1））；reject（值2）把值2给promise，然后再由promise把值2传给catch（function（值2））。 理解的过程： 开始学习廖雪峰...
Promise初步详解（resolve，reject，catch
CC酱写前端的博客
07-05 1181
promise
JavaScript Promise（resolve、reject、async、await）
u014644574的博客
02-11 1725
异步，相当于开个子线程去执行，不会阻塞主函数。 JavaScript 常使用 setTimeout 来完成异步任务。 XMLHttpRequest 来完成异步网络请求。 Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。
Promise函数详解
星海拾遗
11-12 7616
众所周知，Promise是一个用于方便进行异步操作的回调函数。 手撕代码方便记忆 var promise = new Promise(function (resolve, reject) { setTimeout(resolve,1000) }) promise .then( function () { ...
js——promise
weixin_40422539的博客
09-11 200
resolve&reject resolve 和 reject 都是函数，其中调用 resolve 代表一切正常，reject 是出现异常时所调用的： 参数为要输出的信息 new Promise(function (resolve, reject) { var a = 0; var b = 1; if (b == 0) reject("Diveide zero"); else resolve(a / b); }).then(function (value) {
前端大厂高频面试题解析：React、Vue、ES6、异步编程等核心技术
资源摘要信息:"最新前端大厂高频面试题"是一份系统化、实战导向的前端技术面试准备资料，聚焦于当前主流前端框架（React、Vue）与现代JavaScript（ES6+）核心技术，涵盖异步编程、数据结构操作、性能优化策略以及...
8、深入探索 JavaScript 异步编程：从 Promise 到生成器
最新发布
coffee的博客
07-26 34
本文深入探讨了 JavaScript 中的异步编程技术，包括 Promise 和生成器的使用及其优缺点。通过实际示例，分析了 Promise 的链式调用、并行处理多个异步任务的方法，以及生成器如何实现异步任务的暂停、恢复和双向数据交互。同时，文章还指出了这些技术存在的不足，并引入了 async/await 作为改进方案，以提高代码的可读性和可维护性。最终总结了不同异步编程技术的适用场景，帮助开发者在实际项目中灵活运用。
JavaScript异步编程与Promise
# 1. 简介 ### 1.1 异步编程概述 ...Promise是ES6中新增的一种处理异步操作的解决方案，可以更加优雅地处理回调地狱问题，实现更加清晰的代码逻辑。Promise基于状态机制，有三种状态：Pending（进行
（八） ES6 新特性 —— promise
a45667的博客
09-30 487
Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数， 用来封装异步操作并可以获取其成功或失败的结果。1) Promise 构造函数: Promise (excutor) {}2) Promise.prototype.then 方法3) Promise.prototype.catch 方法。
Promise初步详解（resolve，reject，catch）
热门推荐
_夜渐凉
09-28 8万+
一，何为Promise？ 为了直观一点，首先我们采用console.dir(Promise)看一下它的结构组成。 从上面的图片中我们可以到，Promise其实是一个构造函数，它有resolve，reject，race等静态方法;它的原型（prototype）上有then，catch方法，因此只要作为Promise的实例，都可以共享并调用Promise.prototype上面的方法(then...
Promise的使用和类方法（二）
qq_44808878的博客
03-12 285
theme: channing-cyan 跟着coderwhy学习 1.then方法 – 接受两个参数 then方法是Promise对象上的一个方法：它其实是放在Promise的原型上Promise.prototype.then then方法接受两个参数： fulfilled的回调函数：当状态变成fulfilled时会回调的函数； reject的回调函数：当状态变成reject时会...
ES6---new Promise()讲解（尤其注意里面的参数resolve、reject）
xiubinxu的博客
01-27 1万+
ES6—new Promise()讲解（尤其注意里面的参数resolve、reject） 直接打印出来看看吧，console.dir(Promise)。 这么一看就明白了，Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。这么说用Promise new出来的对象肯定就有then、catch方法喽，没错。 Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，P
Uncaught (in promise) ReferenceError: reject is not defined的出现原因及解决
weixin_43858851的博客
03-04 2300
Uncaught (in promise) ReferenceError: reject is not defined的出现原因及解决
ES6---new Promise()使用方法
qq_40792800的博客
07-01 1万+
这是一篇比较好的博文，细致、深入、全面的讲解了Promise ，在我对Promise 一知半解的时候，给了我很大启发，在此转载，以供自己以及其他对Promise 不甚理解的前端开发者阅览。 2015年6月份， ES2015正式发布（也就是ES6，ES6是它的乳名），其中Promise被列为正式规范。作为ES6中最重要的特性之一，我们有必要掌握并理解透彻。本文将由浅到深，讲解Promise的...
Promise
每天都要努力学习哦~~
11-14 6327
Promise是什么? Promise：承诺者模式，它是ES6新增的一个内置类，基于Promise可以有效管理“异步编程”，避免回调地狱 从语法上来说promise是一个构造函数 从功能上来说promise对象来封装一个异步操作,并可获取其成功/失败的结果值 什么是回调地狱? JQ中的ajax管理，是基于回调函数的方式管理的「请求成功后，会触发success回调函数执行，result就是本次请求获取的结果」；如果我们想实现ajax串行，需要把下一个请求发送，放在上一个请求成功的回调函数中处理，.
Promise的resolve和reject使用
weixin_46022934的博客
08-28 1万+
前言（可以跳转解决地狱回调的问题👇🔗） 一、Promise是什么？ 二、Promise的用法如下（resolve） 1.promise的操作演示如下 2.reject的用法如下 总结
new Promise(function(resolve, reject){}) 的reject相当于抛异常
qq_27361945的博客
11-30 981
const promise = new Promise(function(resolve, reject){})中的resolve和reject是函数指针形参，定义Promise时，还不知道resolve和reject具体是什么函数。resolve("value")会将字符串"value"作为参数传给a()函数，可以理解为好像是将resolve("value")替换成a("value")，resolve()像是个占位符，将来会被then()的第一个参数传入的函数（本例为a() ）替换。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值