ECMAScript笔记——Promise

最新推荐文章于 2024-06-18 11:29:56 发布
最新推荐文章于 2024-06-18 11:29:56 发布
阅读量194 收藏
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LinHt_CSDN/article/details/108349210
版权

Promise 概述

  • Promise是ES6中提供的优化异步操作的解决方案。解决了ES6之前异步操作，反复嵌套回调函数所导致的回调地狱问题。
  • 从语法上来讲，Promise是一个构造函数，它可以获取异步操作的请求，且返回一个结果。Promise有三种状态：pending(等待)，fulfiled(成功)，rejected(失败)。状态一旦改变，就不会再变。创造Promise实例后，它会立即执行。

什么是回调地狱

在开发中，会遇到一个异步请求后再执行另一个异步请求的情况。例如请求一个列表数据，之后根据列表找到索引，再去请求分类…一直请求，每一次异步请求，都需要反复嵌套回调函数，导致代码可读性大大降低，后期难以维护。

创建Promise实例

  • 创建一个Promise对象。
  • 调用then()和catch()去处理结果。
let fullPromise = new Promise((resolve,reject) => {
	if (true) {
		resolve('Success Promise');
	} else {
		reject('Error Promise');
	}
})

console.log(fullPromise);

fullPromise.then((res) => {
        console.log('resolved',res);
    },(err) => {
        console.log('rejected',err);
    }
)

fullPromise.catch((res) => {
	console.log(res);
})

创建成功的Promise对象——简写resolve

let p = Promise.resolve('Success Promise');

创建失败的Promise对象——简写reject

let p = Promise.reject('Error Promise');

Resolve()，Reject()

  • Promise对象是由关键字new及其构造函数来创建的，构建函数后，会把一个叫做“处理器函数”（executor function）的函数作为它的参数，并且传入两个参数：resolve，reject，当异步任务顺利完成返回结果时，会调用resolve，而当异步任务失败返回结果时（通常是一个错误对象），会调用reject。
  • 其实这里用“成功”和“失败”来描述并不准确，按照标准来讲，resolve是将Promise的状态置为fullfiled，reject是将Promise的状态置为rejected。
let fullPromise = new Promise((resolve,reject) => {
	if (true) {
		resolve('Success Promise');
	} else {
		reject('Error Promise');
	}
})

console.log(fullPromise);

这里if设置为true，也就是输出resolve('Success Promise')。

打印结果:
在这里插入图片描述
将if设置为false，也就是输出reject('Error Promise')。

let fullPromise = new Promise((resolve,reject) => {
	if (false) {
		resolve('Success Promise');
	} else {
		reject('Error Promise');
	}
})

console.log(fullPromise);

打印结果:
在这里插入图片描述
可以看到，通过调用resolve()和reject()改变了Promise对象的状态。

Then()的用法

  • then()是定义在原型上的 Promise.prototype 。
  • then()之后会返回一个新的promise对象。
  • then()中可以传入两个参数，是函数。第一个对应resolve的回调，第二个对应reject的回调。
let fullPromise = new Promise((resolve,reject) => {
	if (true) {
		resolve('Success Promise');
	} else {
		reject('Error Promise');
	}
})

console.log(fullPromise);

fullPromise.then((res) => {
        console.log('resolved',res);
    },(err) => {
        console.log('rejected',err);
    }
)

打印结果：
在这里插入图片描述
可以看到then()对应resolve()获取到了结果res。

将if设置为false:

let fullPromise = new Promise((resolve,reject) => {
	if (false) {
		resolve('Success Promise');
	} else {
		reject('Error Promise');
	}
})

console.log(fullPromise);

fullPromise.then((res) => {
        console.log('resolved',res);
    },(err) => {
        console.log('rejected',err);
    }
)

打印结果：
在这里插入图片描述
可以看到then()对应reject()获取到了结果err。

通过then()就能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。

链式操作的用法

  • 从表面上看，Promise只是能够简化层层回调的写法，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多。
  • 可以在then()中继续写Promise对象并返回，然后继续调用then()来进行回调操作。

所以使用Promise的正确场景是这样的：

function runTimeP(){
	let timeP = new Promise((resolve,reject) => {
		setTimeout(function(){
			resolve('TimeP Success');
		},2000);
	});

	return timeP;
}

runTimeP()
.then((res) => {
        console.log('resolved1',res);
        return runTimeP();
    },(err) => {
        console.log('rejected1',err);
    }
)
.then((res) => {
        console.log('resolved2',res);
        return runTimeP();
    },(err) => {
        console.log('rejected2',err);
    }
)
.then((res) => {
        console.log('resolved3',res);
        return runTimeP();
    },(err) => {
        console.log('rejected3',err);
    }
)

打印结果：
在这里插入图片描述

  • 在上面的代码中，执行了一个异步操作setTimeout()，2秒后，调用resolve()。
  • 在runTimeP()中传给resolve的数据，通过直接returnPromise对象，能在接下来的then()中拿到。
  • 实现了按顺序每隔两秒输出异步请求返回的结果，而且解决了回调地狱的问题。

Catch()的用法

  • catch()和then()的第二个参数一样，用来指定reject的回调，效果和写在then()第二个参数里面一样。
  • catch()还有另外一个作用：在执行resolve的回调时，还会捕捉resolved抛出的异常。
function runTimeP(){
	let timeP = new Promise((resolve,reject) => {
		if (true) {
			setTimeout(function(){
				resolve('TimeP Success');
			},2000);
		} else {
			reject('Time Error');
		}
	});

	return timeP;
}

runTimeP()
.then((res) => {
	console.log(message);	//未定义message
	console.log(res);
})
.catch((res) => {
	console.log('rejected');
	console.log(res);
})

打印结果：
在这里插入图片描述

  • 上方代码中，在then()中打印了一个未声明的变量message，本来应该报错，但是Js没有报错，而且还运行了catch()中的内容。

All()的使用

  • Promise的all()提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。
  • all()的参数是对象数组。数组内所有的Promise对象状态为fulfiled时，该对象就为fulfiled。只要数组中有任意一个Promise对象状态为rejected，该对象就为rejected。
let num = 0;
let timer = setInterval(function(){
	num++;
	console.log(num);
},1000)

function runTimeP1(){
	let timeP = new Promise((resolve,reject) => {
		setTimeout(function(){
			resolve('TimeP1 Success');
		},3000);
	})
	return timeP;
}
function runTimeP2(){
	let timeP = new Promise((resolve,reject) => {
		setTimeout(function(){
			resolve('TimeP2 Success');
		},5000);
	})
	return timeP;
}
function runTimeP3(){
	let timeP = new Promise((resolve,reject) => {
		setTimeout(function(){
			resolve('TimeP3 Success');
		},10000);
	})
	return timeP;
}

Promise.all([runTimeP1(),runTimeP2(),runTimeP3()])
.then((res) => {
	clearInterval(timer);
	console.log(res);
})

打印结果：
在这里插入图片描述

  • 三个Promise对象都为fulfiled，设置了setTimeout()，分别是3秒后，5秒后，10秒后。
  • 可以看到，使用了all()之后，所有异步操作执行完后才执行回调。

其中Promise对象存在rejected的情况：

let num = 0;
let timer = setInterval(function(){
	num++;
	console.log(num);
},1000)

function runTimeP1(){
	let timeP = new Promise((resolve,reject) => {
		setTimeout(function(){
			resolve('TimeP1 Success');
		},3000);
	})
	return timeP;
}
function runTimeP2(){
	let timeP = new Promise((resolve,reject) => {
		setTimeout(function(){
			reject('TimeP2 Error');
		},5000);
	})
	return timeP;
}
function runTimeP3(){
	let timeP = new Promise((resolve,reject) => {
		setTimeout(function(){
			resolve('TimeP3 Success');
		},10000);
	})
	return timeP;
}

Promise.all([runTimeP1(),runTimeP2(),runTimeP3()])
.then((res) => {
	clearInterval(timer);
	console.log(res);
})
.catch((res) => {
	clearInterval(timer);
	console.log(res);
})

打印结果：
在这里插入图片描述

  • 因为其中有一个Promise对象的状态为rejected，导致all()的状态也为rejected，结果并没有返回。
  • 有了all()，就可以并行执行多个异步操作，并且在一个then()中处理所有的返回数据。

Race()的用法

  • all()是在所有异步操作执行完后才执行回调。与all()相反，第一个异步操作执行完后，以它为准执行回调，这就是race()。
  • race()的用法和all()一样，race()的参数也是数组对象，当数组中所有的Promise对象，有一个先执行了何种状态，该对象就为何种状态，并执行相应函数。
function runTimeP1(){
	let timeP = new Promise((resolve,reject) => {
		setTimeout(function(){
			resolve('TimeP1 Success');
		},3000);
	})
	return timeP;
}
function runTimeP2(){
	let timeP = new Promise((resolve,reject) => {
		setTimeout(function(){
			reject('TimeP2 Error');
		},5000);
	})
	return timeP;
}
function runTimeP3(){
	let timeP = new Promise((resolve,reject) => {
		setTimeout(function(){
			resolve('TimeP3 Success');
		},10000);
	})
	return timeP;
}

Promise.race([runTimeP1(),runTimeP2(),runTimeP3()])
.then((res) => {
	clearInterval(timer);
	console.log(res);
})
.catch((res) => {
	console.log(res);
})

打印结果：
在这里插入图片描述

  • race()执行了最早运行的runTimeP1()。
  • race()可以用在请求获取上，设置setTimeout()，当获取超时，race()就会执行setTimeout()。
ECMAScript Javascript Promise 详解
03-20
ECMAScript Javascript Promise 详解
Promise笔记发布 (1).txt
07-31
为了简化异步编程，ECMAScript 6 引入了`Promise`对象。 **Promise**可以理解为一个容器，它保存着某个未来才会结束的事件（通常是异步操作）的结果。从语法的角度来看，`Promise`是一个对象，通过它可以获取到异步...
ECMAScript之Promise
阿祥_CSDN
04-20 286
参考资料 https://promisesaplus.com/ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise 案例 setTimeout 和 Promise 执行顺序 示例代码如下： setTimeout(() => conso...
promise
weixin_34290096的博客
03-13 301
一个promise可能有三种状态：等待（pending）、已完成（fulfilled）、已拒绝（rejected） 一个promise的状态只可能从“等待”转到“完成”态或者“拒绝”态，不能逆向转换，同时“完成”态和“拒绝”态不能相互转换 promise必须实现then方法（可以说，then就是promise的核心），而且then必须返回一个promise，同一个promise的then可...
ECMAScript-异步编程-Promise
东东爱编码博客
11-23 181
文章目录一、 ECMAScript-异步编程-Promise1. MDN定义2. Promise的几种状态3. 相关静态方法4. 相关案例5. 使用promise来改造ajax 一、 ECMAScript-异步编程-Promise 1. MDN定义 Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。 一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知的值。它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。 这样使得异步方法可以像
前端基础之《ECMAScript 6（8）—Promise》
csj50的专栏
10-21 351
1、Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。1、Promise接收一个函数类型的参数。这个函数有两个入参。入参名字可以叫resolve和reject。2、把异步函数封装在Promise对象中，成功调用resolve()，失败调用reject()。一秒钟后，控制台打印：数据库中的用户数据。二、Promise基本语法。一、什么是Promise。
ECMAScript——学习笔记汇总
LinHt_CSDN的博客
09-12 354
ECMAScript 概述 ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准，但实际上后两者是ECMA-262标准的实现和扩展。 ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，
JS 语言基础笔记——第四篇（Symbol类型属性）
weixin_50936255的博客
05-28 958
目录 前言 前言
web开发技术——课程笔记.rar
03-17
ECMAScript（ES）的最新版本引入了许多新特性，如箭头函数、模板字符串、解构赋值、let和const、Promise和async/await等，提升了JavaScript的编写效率和代码质量。 8. 测试与调试： 了解如何使用Chrome DevTools...
JavaScript和promise——0_0 单线程的JavaScript和多线程的宿主
最新发布
乡亲们啊的博客
06-18 1123
JavaScript引擎自身并不是一个可执行的平台，JavaScript是依附于其他平台运行的脚本，而被依附的平台，就被称为宿主。可是浏览器上的JavaScript和node.js上的JavaScript，以及微信小程序里的JavaScript，几乎是语法相似的三种语言。所以JavaScript的块的执行，只有先后顺序的不确定性，而执行时一定是不受打扰的，单线程的
ECMAScript6中的promise对象
dawn0718的专栏
10-13 354
　　promise是EAMCScript6中很重要的一个对象，需要掌握一些细节，这是学习promise的笔记。
ECMAScript6中的promise用法
style201904的博客
06-14 514
promise用法 <script> /** * promise对象 * promise对象 代表着未来发生的事情 * 这个里面 我们主要在强调一下 异步的操作 * 因为promise对象 一般都是异步的处理方式 * aysnc false 同步的 true 异步的 * 同步 锁死的浏览器 其...
【ECMAScript 学习笔记】3.Promise 的使用
hvkCoder的博客
03-28 401
Promise 的作用   Promise 用于异步计算，可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果。   可以在对象之间传递和操作 Promise,帮助我们处理队列。 Promise 的声明 new Promise(function(resolve,reject){ resolve(); // 数据处理完成 reject(); //数...
ECMAScript6标准Promise的使用
jasonzds的博客
10-27 2678
1， Promise的含义 Promise是异步编程的一种解决方案，比传统的解决方案更合理更强大，es6将其写入语言标准，同意用法，原生提供了Proimse对象，所谓Promise简单的说就是一个容器，里面保存着某个未来才会结束的事件，Promise提供统一的API(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
ECMAScript6中Promise对象的基本用法
gdjlc的专栏
03-21 177
Promise是处理异步代码的一种方法，避免了层层嵌套的回调函数，且支持链式操作。 Promise 对象代表一个异步操作，有三种状态： pending: 初始状态，不是成功或失败状态。 fulfilled: 意味着操作成功完成。 rejected: 意味着操作失败。 Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。 一、Promise的创建 Promise的构造函数接收一个函数作为参数，该函数的两个参数：resol
Promise 的基础用法
weixin_30629653的博客
05-03 93
Promise 是异步编程的一种解决方案，比传统的解决方案–回调函数和事件－－更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise 所谓Promise ，简单说就是一个容器，里面保存着某个未来才回结束的事件(通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise 对象的状态不受外界影响 三...
从头手写一个Promise
weixin_34062329的博客
05-13 157
前言 在javascript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。 最开始我们可以用回调函数来解决这个问题， function callBack(){ console.log('回调') } setTimeout(callBack, 1000) // 回调 复制代码但是随着业务的不断深入，难免会像陷入回调地狱这样...
Promise构造函数的错误处理
lxtlog的博客
03-01 318
1. then()方法 then是Promise构造函数的实例方法。第一个参数是成功状态的回调函数，第二个参数是失败状态的回调函数。 new Promise((resolve, reject) => { reject('error') }).then(data => { console.log(data) }, error => { console.log(error) // error }) 2. catch()方法 catch是Promise构造函数的实例方法。实...
前端知识之promise
qq_37169866的博客
02-25 4015
什么是promise？ promise 是 ES6 中提供的原生对象 promise主要用于异步计算，将异步操作队列化，按照期望的顺序执行以返回符合预期的结果 promise的作用 咱们先了解什么是同步，什么是异步 举个形象的例子： 同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到我告诉你听到了，才一起去吃饭。 异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到下班才去吃饭。 还有个简单的例子 打电话是同步 发消息是异步 异步操作的常见语法（ajax） /
ECMAScript的Promise
02-29
ECMAScript的Promise是一种用于处理异步操作的对象。它可以将异步操作封装成一个Promise对象，通过链式调用的方式来处理异步操作的结果。 Promise对象有三种状态：pending（进行中）、fulfilled（已成功）和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值