Promise

最新推荐文章于 2024-09-09 09:35:48 发布
最新推荐文章于 2024-09-09 09:35:48 发布
阅读量634 收藏 12
点赞数 18
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_83997124/article/details/139373424
版权

目录

一、promise是什么？

Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。

1.promise对象

1、Promise对象是一个为异步操作提供统一API，以供异步操作进一步处理的对象。

2、Promise对象的两个特点：

① 对象的状态不受外界影响

有三种状态：Pending（进行中）、Resolved（已完成）、Rejected（已失败）

只有异步操作的结果可以决定当前是哪一种状态

② 一旦状态改变，就不会再变，任何时候都可以得到这个结果

3、Promise对象的缺点：

① 无法取消 Promise，一旦新建它就会立即执行，无法中途取消

② 如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部

③ 当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

2.Promise对象有以下两个特点。

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

3.先new一个promise小案例

调用resolve()方法可以将promise对象转成成功状态
调用reject()方法可以将promise对象转成失败状态
promise对象，提供了两个方法：
A. then(回调函数) -> 获取promise成功的状态结果
B. catch(回调函数) -> 捕获promise失败的状态结果

function p1(){
		return new Promise((resolve) => {
			setTimeout(() => {
				console.log(执行完成);
				resolve({a:1,b:2})
			},1000)
		})
	}

	p1().then((res) => {
	})

其执行过程是：执行了一个异步操作，也就是setTimeout，1秒后，输出“执行完成”，并且调用resolve方法。

reject方法

reject就是失败的时候的回调，他把promise的状态修改为reject，这样我们在then中就能捕捉到，然后执行“失败”情况的回调。

function getUserInfo(username){
		return new Promise((reslove,reject) => {
			$.ajax({
				url:'http://www.web14ban.com/index.php/index/goods/userinfo',
				method:'post',
				data:{
					username:username
				},
				success:function(res){
					reslove(res)
				},
				error:function(err){
					reject(err)
				}
			})
		})
	}
	function getGoodsInfo(userId){
		return new Promise((reslove,reject) => {
			$.ajax({
				url:'http://www.web14ban.com/index.php/index/goods/orderinfo',
				method:'post',
				data:{
					id:userId
				},
				success:function(res){
					reslove(res)
				},
				error:function(err){
					reject(err)
				}
			})
		})
	}
	function getGoodsInfo(goodsId){
		return new Promise((reslove,reject) => {
			$.ajax({
				url:'http://www.web14ban.com/index.php/index/goods/goodsinfo',
				method:'post',
				data:{
					id:goodsId
				},
				success:function(res){
					reslove(res)
				},
				error:function(err){
					reject(err)
				}
			})
		})
	}


	getUserInfo('a123123').then((res) => {
		return getOrderInfo(res.info.user_id)
	}).then((res) => {
		return getGoodsInfo(res.info.goods_id)
	}).then((res) => {
		console.log('成功',res);
	}).catch((err) => {
		console.log('失败',err);
	}).finally(() => {
		console.log('都会执行');
	})

catch方法

与Promise对象方法then方法并行的一个方法就是catch,与try catch类似，catch就是用来捕获异常的，也就是和then方法中接受的第二参数rejected的回调是一样的

function getUserInfo(username){
		return new Promise((reslove,reject) => {
			$.ajax({
				url:'http://www.web14ban.com/index.php/index/goods/userinfo',
				method:'post',
				data:{
					username:username
				},
				success:function(res){
					reslove(res)
				},
				error:function(err){
					reject(err)
				}
			})
		})
	}
	function getGoodsInfo(userId){
		return new Promise((reslove,reject) => {
			$.ajax({
				url:'http://www.web14ban.com/index.php/index/goods/orderinfo',
				method:'post',
				data:{
					id:userId
				},
				success:function(res){
					reslove(res)
				},
				error:function(err){
					reject(err)
				}
			})
		})
	}
	function getGoodsInfo(goodsId){
		return new Promise((reslove,reject) => {
			$.ajax({
				url:'http://www.web14ban.com/index.php/index/goods/goodsinfo',
				method:'post',
				data:{
					id:goodsId
				},
				success:function(res){
					reslove(res)
				},
				error:function(err){
					reject(err)
				}
			})
		})
	}


	getUserInfo('a123123').then((res) => {
		return getOrderInfo(res.info.user_id)
	}).then((res) => {
		return getGoodsInfo(res.info.goods_id)
	}).then((res) => {
		console.log('成功',res);
	}).catch((err) => {
		console.log('失败',err);
	}).finally(() => {
		console.log('都会执行');
	})

Promise.all() 方法

与then同级的另一个方法，all方法，该方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后并且执行结果都是成功的时候才执行回调。

function getUserInfo(username){
		return new Promise((resolve,reject) => {
			$.ajax({
				url:'http://www.web14ban.com/index.php/index/goods/userinfo',
				method:'post',
				data:{
					username:username
				},
				success:function(res){
					resolve(res)
				},
				error:function(err){
					reject(err)
				}
			})
		}).catch((err) => {
			return 'getUserInfo错误';
		})
	}
	function getOrderInfo(userId){
		return new Promise((resolve,reject) => {
			$.ajax({
				url:'http://www.web14ban.com/index.php/index/goods/orderinfo',
				method:'post',
				data:{
					id:userId
				},
				success:function(res){
					resolve(res)
				},
				error:function(err){
					reject(err)
				}
			})
		}).catch((err) => {
			return 'getOrderInfo错误';
		})
	}
	function getGoodsInfo(goodsId){
		return new Promise((resolve,reject) => {
			$.ajax({
				url:'http://www.web14ban.com/index.php/index/goods/goodsinfo',
				method:'post',
				data:{
					id:goodsId
				},
				success:function(res){
					reject(res)
				},
				error:function(err){
					reject(err)
				}
			})
		}).catch((err) => {
			return 'getGoodsInfo错误';
		})
	}

	Promise.all([getUserInfo('a123123'),getOrderInfo(1),getGoodsInfo('1,2,3')]).then((res) => {
		console.log(res)
	}).catch((err) => {
		console.log('失败',err)
	})
执行特点：
		只有三个promise实例的状态都确定为成功时，Promise.all的最终状态才是成功；
		只要有一个出现错误，Promise.all()的状态就会变成失败。
如何避免一个错，Promise.all最终变成错误状态这个问题：
给每个请求实例写上单独的catch!

Promise.race() 方法

all是等所有的异步操作都执行完了再执行then方法，那么race方法就是相反的，谁先执行完成就先执行回调。先执行完的不管是进行了race的成功回调还是失败回调，其余的将不会再进入race的任何回调
同时执行多个实例，哪个先确定状态，race方法就以哪个状态为主

function p1(){
		return new Promise((resolve,reject) => {
			setTimeout(() => {
				resolve('p1');
			},4000)
		})
	}
	function p2(){
		return new Promise((resolve,reject) => {
			setTimeout(() => {
				reject('p2');
			},2000)
		})
	}
	function p3(){
		return new Promise((resolve,reject) => {
			setTimeout(() => {
				resolve('p3');
			},3000)
		})
	}

	Promise.race([p1(),p2(),p3()]).then((res) => {
		console.log('成功',res)
	}).catch((error) => {
		console.log('失败',error)
	});

Promise.allSettled(看实例就好)

并发去执行多个实例，但是，就算有实例失败，也会进入到allSettled的成功方法中去（then）

function getUserInfo(username){
		return new Promise((resolve,reject) => {
			$.ajax({
				url:'http://www.web14ban.com/index.php/index/goods/userinfo',
				method:'post',
				data:{
					username:username
				},
				success:function(res){
					resolve(res)
				},
				error:function(err){
					reject(err)
				}
			})
		})
	}
	function getOrderInfo(userId){
		return new Promise((resolve,reject) => {
			$.ajax({
				url:'http://www.web14ban.com/index.php/index/goods/orderinfo',
				method:'post',
				data:{
					id:userId
				},
				success:function(res){
					resolve(res)
				},
				error:function(err){
					reject(err)
				}
			})
		})
	}
	function getGoodsInfo(goodsId){
		return new Promise((resolve,reject) => {
			$.ajax({
				url:'http://www.web14ban.com/index.php/index/goods/goodsinfo',
				method:'post',
				data:{
					id:goodsId
				},
				success:function(res){
					reject(res)
				},
				error:function(err){
					reject(err)
				}
			})
		})
	}

	//
	Promise.allSettled([getUserInfo('a123123'), getOrderInfo(1), getGoodsInfo('1,2,3')]).then((res) => {
		console.log('成功',res)
	}).catch((err) => {
		console.log('失败',err)
	})
This g-y-m
关注
  • 18
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript之手写一个promise
hello，是翠花呀
05-09 672
promise promise 的三个状态：pending（未完成）、fulfilled（完成）、reject（拒绝） 一个常见操作： new Promise((resolve, reject) => { //一些请求 this.$axios .get("/", { params: { id: id } }) .then(res => { resol...
promise
CrystalLee
09-05 711
一、含义 Promise对象有以下两个特点。 （1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。 （2）一旦状态改变，就...
【JavaScript】手写Promise
编码世界
05-15 4625
面试中经常会被问到你会手写Promise吗？本文带你手撸Promsie
js-手写Promise
qq_32644987的博客
06-12 1023
1、Promise 创建MyPromise.js文件，在里面进行MyPromise逻辑处理 我们先看原生Promise的使用： new Promise((resolve,reject) => { }) 有代码可以看出：原生Promise通过new创建Promise对象，然后传入两个函数resolve、reject参数用于后续执行； 好的，那我们从这方面开始手写MyPromise。 首先，需要通过new创建对象，那就需要在内部实现构造函数 其次构造函数需要传入两个函数作为执行者 Pormi
JS手写Promise（详细过程）
m0_56698268的博客
03-28 1955
手写Promise
ES6 Promise用法小结
热门推荐
涂涂
07-25 39万+
目录 1.什么是Promise reject的用法 catch的用法 all的用法 race的用法 1.什么是Promise Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。 Promise对象有以下两个特点。 （1）对象的状态不受外界影响。Promise对象代表一个异步操...
ws-promise:一个微小的、基于 Promise 的 WebSocket 协议，允许在 ECMAScript 中使用请求-响应
07-24
ws-promise 该项目使您能够在通过 WebSockets 通信时使用async和await 。 在幕后，WebSocket API 首先被包裹在一个Promise层中，然后不同的端点通过一个微小的 RPC 协议连接在一起。 总之，它使您能够在客户端...
深入理解Promise.all
10-18
Promise.all是JavaScript中用于处理多个异步操作的技术之一，它允许我们将多个Promise实例包装成一个Promise实例，只有所有的Promise都成功解决（resolve）了，才会将结果作为数组返回；如果有任何一个Promise被拒绝...
快速学习ES6新特性-Promise
01-07
1.7、Promise 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步...
synchronized-promise:将ES6 Promise转换为同步函数调用，这是去同步包的简单包装
05-13
将ES6 Promise转换为同步函数调用，这是去同步包的简单包装 安装 npm install synchronized - promise -- save 用法 首先，您需要针对JavaScript的“ synchronized-promise包： const sp = require ( '...
Javascript-手写Promise（超详细，适合小白～）
weixin_72188701的博客
09-01 481
Javascipt 面试必会的promise源码手写
js手写promise。
ranshakalove的博客
07-21 126
js手写promise。
Promise用法
如雨随行的博客
10-15 406
链式操作 runAsync1、runAsync2和runAsync3是三个封装了异步方法setTimeout的方法。 function runAsync1(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console...
js 手写 Promise
weixin_30701521的博客
04-28 150
/* * pending:初始化成功 * fulfilled:成功 * rejected：失败 * */ function Promise(cback){ this.status = 'pending'; this.value = undefined this.reason = undefined this.fulfille...
js之手写promise
qq_42744920的博客
09-12 221
手写promise
Promise入门
weixin_33774308的博客
03-09 113
众所周知的，Javascript是一种单线程的语言，所有的代码必须按照所谓的“自上而下”的顺序来执行。本特性带来的问题就是，一些将来的、未知的操作，必须异步实现（关于异步，我会在另一篇文章里进行讨论）。本文将讨论一个比较常见的异步解决方案——Promise，时至本文最后更新的日子，Promise的应用已经极其广泛。 Promise解决的问题 我相信每个前端都遇到过这样一个问题，当一个异步任务...
软件著作权申请教程（超详细）（2024新版）软著申请
最新发布
m0_75269526的博客
09-09 2045
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
理解JavaScript中的Promise
"这篇资源主要介绍了JavaScript中的Promise概念及其应用，旨在帮助读者理解并掌握Promise在处理异步操作中的重要性。" 在JavaScript中，由于其单线程的执行机制，所有的任务都会按照顺序依次执行，这就导致了当涉及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值