Promise教程

已于 2024-03-14 20:02:58 修改
阅读量429 收藏 3
点赞数 3
文章标签： javascript 前端 vue.js
于 2023-02-01 07:44:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44791442/article/details/128396389
版权

文章目录

1、promise简介

定义：promise是es6引入的一种新的解决异步编程的方案。从语法上来说，是一个构造函数，可以实例化对象，封装异步操作，获取成功或失败的结果，其优点是支持链式调用，可以解决回调问题；指定回调的方式更为灵活。

2、promise初体验

2.1 题目：设计一个抽奖，中奖的概率为30%

1）：用常规方式实现

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>promise初体验</title>
	</head>
	<body>
		<button>点我抽奖</button>
	</body>
	<script>
		// 获取随机整数[min,max]
		function getRandom(min, max) {
			return Math.floor(Math.random() * (max - min + 1)) + min;
		}
		var btn = document.querySelector("button");
		btn.onclick = function () {
			setTimeout(() => {
				var n = getRandom(1, 100);
				if (n <= 30) {
					alert("恭喜您,获得一台全新iPhone15!");
				} else {
					alert("很遗憾,奖品与您擦肩而过,再接再厉！");
				}
			}, 3000);
		};
	</script>
</html>

2）promise实现：promise对象可以包裹一个异步操作，成功时调用resolve()方法，失败时调用reject方法，通过promise的then方法执行回调（第一个函数为成功时的回调，第二个为失败时的回调）

<script>
		// 获取随机整数[min,max]
		function getRandom(min, max) {
			return Math.floor(Math.random() * (max - min + 1)) + min;
		}
		var btn = document.querySelector("button");
		btn.onclick = function () {
			// setTimeout(() => {
			// 	var n = getRandom(1, 100);
			// 	if (n <= 30) {
			// 		alert("恭喜您,获得一台全新iPhone15!");
			// 	} else {
			// 		alert("很遗憾,奖品与您擦肩而过,再接再厉！");
			// 	}
			// }, 3000);
			var p = new Promise((resolve,reject)=>{
				setTimeout(() => {
					var n = getRandom(1, 100);
					if (n <= 30) {
						resolve() //将promise对象的状态设置为[success]
					} else {
						reject() //将promise对象的状态设置为[fail]
					}
				}, 3000);
			})
			// 调用then方法
			p.then(()=>{
				alert("恭喜您,获得一台全新iPhone15!");
			},()=>{
				alert("很遗憾,奖品与您擦肩而过,再接再厉！");
			})
		};
</script>

2.2 题目：封装一个函数sendAjax发送GET AJAX请求；参数URL；返回结果Promise对象

ajax.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>promise初体验</title>
	</head>
	<body>
		<button>发送sendAjax请求</button>
	</body>
	<script>
		// 封装一个sendAjax函数
		function sendAajx(url){
				return new Promise((resolve,reject)=>{
					var xhr = new XMLHttpRequest()
					// xhr.responseType = 'json'
					xhr.open('GET',url)
					xhr.send()
					xhr.onreadystatechange = function(){
						if(xhr.readyState == 4){
							if(xhr.status>=200&&xhr.status<300){
								resolve(xhr.response)
							}else{
								reject(xhr.status)
							}
						}
					}
				})
			}
		var btn = document.querySelector("button");
		btn.onclick = function () {
			sendAajx('http://127.0.0.1:8000/ajax').then(
				(res)=>{
					console.log(res)
			},(code)=>{
				console.log('失败:'+code)
			})
		};
	</script>
</html>

server.js

const express = require('express')
var app = new express()
app.get('/ajax',(request,response)=>{
  response.setHeader('Access-Control-Allow-Origin','*')
  response.send("用户数据")
})
app.listen(8000,()=>{
  console.log('8000端口正在运行中....')
})

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

3、promise的状态

  • promise的一个属性 [PromiseState]

    • pending 未决定的
    • resolved/fullfilled 成功的
    • rejected 失败的

  • promise状态的改变

    • pending–>resolved/fullfilled
    • pending–>rejected
const p=new Promise((resolve,reject)=>{})

在这里插入图片描述

4、promise对象的值

属性值 [PromiseResult]，保存着异步任务成功或者失败后的结果，可以通过resolve和reject两个函数进行修改,即resolve或者reject的形参值
在这里插入图片描述

5、promise的工作流程

在这里插入图片描述

6、promise的相关API

（1）Promise构造函数：Promise(excutor){}

  • executor函数：执行器（resolve，reject）=> { }
  • resolve函数：内部定义成功时调用的函数：value => {}
  • reject函数：内部定义失败时调用的函数：reason=> {}

注意：excutor会在Promise内部立即同步调用，异步操作在执行器中执行

（2）Promise.prototype.then(onResolved,onRejected)

  • onResolved:成功的回调函数
  • onRejected：失败的回调函数
  • 最终返回一个新的Promise对象

（3） Promise.prototype.catch(onRejected)

  • onRejected：失败的回调函数
    在这里插入图片描述

    以下是promise函数对象中的方法，而非实例对象

（4）promise.resolve()方法：（value）=>{}

  • value:成功的数据或promise对象
  • 说明：返回一个成功或失败的promise对象
  • ①如果resolve传入的是一个非promise的值，返回值为成功的promise，其结果为该值，②如果传入的是一个promise对象，返回值成功或失败根据传入的promise决定，结果为传入的promise结果
let p1=Promise.resolve(520)
 console.log(p1);

 let p2=Promise.resolve(new Promise((resolve,reject)=>{
  resolve("ok")
 }))
 console.log(p2);
 
 let p3=Promise.resolve(new Promise((resolve,reject)=>{
  reject("err")
 }))
 console.log(p3);

在这里插入图片描述

（5）promise.reject()方法：(reason)=>{}

  • 说明：返回一个失败的promise对象（状态为rejected）,传入什么，失败的结果就是什么，假如传入的是一个成功的promise对象，那么结果就是那个成功的promise对象
const p4=Promise.reject(new Promise((resolve,reject)=>{
  resolve("ok")
 }))
 console.log(p4);

在这里插入图片描述
（6）promise.all方法：[promise]=>{}

  • promise:包含n个promise数组
  • 说明：返回一个新的promise，只有所有promise都成功才成功，只要有一个失败都失败。如果成功，结果值为他们分别成功的结果组成的数组，如果失败，结果值为失败的那个promise的结果
let p1=new Promise((resolve)=>{
  resolve("ok")
 })
 let p2=new Promise((resolve)=>{
  resolve("success")
 })

 const p=Promise.all([p1,p2])

 console.log(p);

在这里插入图片描述

let p1=new Promise((resolve)=>{
  resolve("ok")
 })
 let p2=new Promise((resolve)=>{
  resolve("success")
 })
 let p3=new Promise((resolve,reject)=>{
  reject("err")
 })

 const p=Promise.all([p1,p2,p3])

 console.log(p);

在这里插入图片描述
（7） promise.race()方法:[promise]=>{}

  • promise:包含n个promise数组
  • 返回一个新的promise，第一个改变状态的promise为最终结果
let p1=new Promise((resolve)=>{
  setTimeout(()=>{
    resolve("ok")
  },1000)
  
 })
 let p2=new Promise((resolve)=>{
  resolve("success")
 })
 let p3=new Promise((resolve,reject)=>{
  reject("err")
 })

 const p=Promise.race([p1,p2,p3])

 console.log(p);

在这里插入图片描述

7、promise的几个关键问题

7.1 Promise对象状态改变的方式

  1. resolve函数
  2. reject函数
  3. throw抛出错误

相关代码：

<script>
  let p = new Promise((resolve,reject)=>{
    // 1、resolve函数
    resolve('ok') //pending => fullfiled(resolved)
    // 2、reject函数
    reject('error') // pending => rejected
    // 3、抛出错误
    throw '出问题了'
  })
   console.log(p)
</script>

打印结果分别为：
resolve():在这里插入图片描述
reject():
在这里插入图片描述
throw:
在这里插入图片描述

7.2 promise执行多个回调

当promise改变为对应状态时都会执行
相关代码：

 <script>
    let p = new Promise((resolve,reject)=>{
      resolve()
    })
    p.then(()=>{
      console.log('one');
    })
    p.then(()=>{
      console.log('two');
    })
  </script>

打印结果：

在这里插入图片描述

7.3 改变promise状态和指定回调谁先执行

1）都有可能,正常情况下，先指定回调，再改变状态，但也可以先改变状态再执行回调
2）如何先改变状态再指定回调？
① 在执行器中直接调用resolve()/reject
② 延长更长时间再调用then
3）什么时候才能得到数据？
① 如果先指定的回调，当状态改变时，回调函数就会调用，执行回调，得到数据
②如果先改变状态，当指定回调时，回调函数就会调用，得到数据

7.4 promise.then方法的返回结果特点

  1. 非promise，返回promise状态为成功,结果为返回的结果
  2. 为promise对象，返回的结果为promise的结果
  3. 抛出错误

相关代码：

<script>
  let p = new Promise((resolve,reject)=>{
    resolve()
  })
  let result = p.then(()=>{
    // 1.非promise，返回promise状态为成功,结果为返回的结果
    // return 'ok'
    // 2.为promise对象，返回的结果为promise的结果、
    // return new promise((resolve,reject)=>{
    //   reject('error')
    // })
    // 3.抛出错误
    throw '出了问题'
  },()=>{

  })
  console.log(result)
</script>

对于上述代码的打印结果分别如下：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7.5 如何串联多个任务

练习代码：

<script>
  var p = new Promise((resolve,reject)=>{
    resolve('success')
  })
  p.then((val)=>{
    console.log(val)
    return 'ok'
  }).then((val)=>{
    console.log(val);
    return new Promise((resolve,reject)=>{
      resolve('yes')
    })
  }).then((val)=>{
    console.log(val);
  }).then((val)=>{
    console.log(val);
  })
</script>

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

7.6 异常传递穿透

1）当使用promise的then链式调用时，可以在最后指定失败的回调
2）前面任何一步操作出现异常，都会传到最后的失败中处理
相关代码：

<script>
  let p = new Promise((resolve,reject)=>{
    resolve()
  })
  p.then(()=>{
    console.log('err');
    reject()
  }).then(()=>{
    console.log('ok');
  }).catch(()=>{
    console.log('似乎出错了')
  })
</script>

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

7.7 如何中断promise链

1）当使用promise的·then链式调用时，在中间中断，不再调用后面的回调函数
2）方法：在回调函数中返回一个pending状态的promise对象
相关代码：

<script>
  let p = new Promise((resolve,reject)=>{
    resolve()
  })
  p.then(()=>{
    console.log(111);
    return new Promise(()=>{})
  }).then(()=>{
    console.log(222);
  }).then(()=>{
    console.log(333);
  })
</script>

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

8、async与await

8.1 MDN文档

async教程

8.2 Async函数

1）函数的返回结果为promise对象
2）promise对象的结果由async函数执行的返回值决定，与then类似

<script>
  async function main(){
    // 1.非promise，返回promise状态为成功,结果为返回的结果
    // return 'ok'
    // 2.为promise对象，返回的结果为promise的结果、
    return new Promise((resolve,reject)=>{
      reject('error')
    })
    // 3.抛出错误
    // throw '出了问题' 
  }
  let result = main()
  console.log(result);
</script>

8.3 await表达式

1）awat 右侧的表达式一般为promise对象，但也可以是其他的值
2）如果表达式是promise对象，awai返回的是promise成功的值
3）如果表达式是其他值，直接将此值作为await的返回值

注意：
①await必须写在async函数中，但async函数中可以没有await
②如果await的promise失败了，就会抛出异常，需要通过try…catch捕获处理

<script>
  async function main(){
    let p = new Promise((resolve,reject)=>{
      resolve('ok')
    })
    let p1 = new Promise((resolve,reject)=>{
      reject("Error")
    })
    let res1 = await p
    let res2 = await 'success'
    console.log(res1);
    console.log(res2);
    try{
      let res3 = await p1
    }catch (e){
      console.log(e)
    }
  }
  main()
</script>

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

完结，撒花！！！！

小小姜鸭
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
【JS】Promise的完全基础入门教学
a1611107035的博客
11-05 438
Promise的出现把JavaScript的异步函数的功能大大提升，并且解决了回调地狱的问题。本文将从promise的核心出发，仔细分析promise对于一个新手来说的意义和用法。
BAT前端经典面试问题：史上最最最详细的手写Promise教程
weixin_34082789的博客
06-27 502
我们工作中免不了运用promise用来解决异步回调问题。平时用的很多库或者插件都运用了promise 例如axios、fetch等等。但是你知道promise是咋写出来的呢？ 别怕～这里有本promisesA+规范，便宜点10元卖给你了。 1、Promise 的声明 首先呢，promise肯定是一个类，我们就用class来声明。 由于new Promise((resolve, reject)=...
Promise 详解（原理篇）
最新发布
不知道并不可怕，可怕的是自己不知道 “自己不知道”。
07-20 1473
Promise 是一种异步编程的解决方案。在异步操作中，callback 会导致回调地狱的问题，Promise 解决了这个问题。一个 Promise对象有以下三种状态:pending：初始状态，既不是成功，也不是失败状态。：意味着操作成功完成。rejected：意味着操作失败。当 new Promise() 被实例化后，即表示 Promise 进入 pending 初始化状态，准备就绪，等待运行。
Promise教程（一）
qq_50680212的博客
06-21 272
Promise是什么 1. 抽象表达： - Promise是一门新的技术（ES6提出的） - Promise是JS中异步编程的新方案（旧方案是谁？---纯回调） 2. 具体表达： - 从语法上来说：Promise是一个内置构造函数，是程序员自己new调用的 - 从功能上来说：Promise的实例对象可以用来封装一个异步操作，并可以获得其成功/失败的值......
Promise入门教程
qq_38253325的博客
12-09 348
概念: Promise 对象代表一个异步操作，有三种状态： pending: 初始状态，不是成功或失败状态。 fulfilled: 意味着操作成功完成。 rejected: 意味着操作失败。 学习链接: https://www.runoob.com/w3cnote/javascript-promise-object.html 基础用法: ```javascript var promise = new Promise(function(resolve, reject) { // 执行成功
Fetch+Promise教程
09-19
Fetch+Promise教程 Fetch API 是一种现代化的网络请求方式，旨在取代传统的 XMLHttpRequest。它提供了许多优点，包括链式调用的语法、返回 Promise 等。Fetch API 的概念和用法、Headers 对象、Request 对象等都是...
promise-tutorial:JavaScript异步和Promise教程
05-24
测试异步JavaScript 这是有关测试异步JavaScript的教程贡献克隆此仓库。 npm install npm start 在浏览器中编辑提交拉取请求这将启动TiddlyWiki服务器。 在浏览器中打开http://localhost:8080并进行编辑。 它们会...
promise-nuggets.github.io:Promise块是一组JavaScript Promise教程和常见模式
05-07
承诺金块要撰写掘金文章，请编写降价文件。 源保存在src分支中。 当前的块可以在./src/documents/articles找到建立网站npm installnpm start您可以在out目录中查看生成的输出，也可以在DocPad启动的服务器的运行中在...
Promise js从入门到实战全套教程
10-17
Promise 是异步编程的一种解决方案，比传统的解决方案回调函数, 更合理和更强大。ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象 。本视频主打，包括Promise基础语法、手写Promise、async与await 以及 ...
ES6学习教程之Promise用法详解
01-22
一篇来理解和使用promise（本篇） 另一篇来从promise使用功能的角度来剖析下promise的源码（下一篇） 1、什么是Promise 我的理解是：实现让我们用同步的方式去写异步代码的一种技术。是异步解决方案的一种。 他可以...
【JavaScript】Promise教程、Promise的使用。
MicroAnswer的博客
09-12 437
重要声明：本文章仅仅代表了作者个人对此观点的理解和表述。读者请查阅时持自己的意见进行讨论。 本文原文：【JavaScript】Promise教程、Promise的使用。。本文更新不及时建议到原文地址浏览。 Promise 是 ES6 加入的特性，它让异步任务更加合理和强大。越来越多的人开始使用它，我们也不能坐视不管，技术要点也必须要收入囊中。 尝鲜 正式介绍之前，先看一看Promise用起来通...
简单易懂的Promise基础教程（小白入门）
潮汐未见潮落的博客
06-13 5909
promise的入门基础知识，简单了解promise的三种状态
14、Promise的对象
weixin_43613849的博客
03-05 330
目录 1、Promise 的含义 2、基本用法 3、Promise.prototype.then() 4、Promise.prototype.catch() 5、Promise.prototype.finally() 6、Promise.all() 7、Promise.race() 8、Promise.resolve() （1）参数是一个 Promise 实例 （2）参数是一个thenable对象 （3）参数不是具有then()方法的对象，或根本就不是对象 （4）不带有任何参数.
Promise学习
山鬼谣弋痕夕的博客
07-21 291
在JavaScript的世界中，所有代码都是单线程执行的。 由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现： function callback(){ console.log('Do something'); } console.log('before setTimeout()'); setTimeout(callback...
Promise的相关介绍
Serena_tz的博客
04-27 201
二种类型的回调函数 同步回调 理解: 立即执行, 完全执行完了才结束, 不会放入回调队列中 例子: 数组遍历相关的回调函数 / Promise 的 excutor 函数 异步回调 理解: 不会立即执行, 会放入回调队列中将来执行 例子: 定时器回调 / ajax 回调 / Promise 的成功|失败的回调 JS的error处理 错误的类型 Error: 所有错误的父类型 ReferenceError: 引用的变量不存在 TypeError: 数据类型不正确的错误 RangeError: 数据值不
Promise基本使用（慕课Promise教程笔记）
Just do it！
11-26 357
很久没写博客了......看了很多关于Promise的文章，但是感觉也不是很理解，没办法去就看视频了。偶然发现慕课里有个关于Promise的视频，然后今天看了前两章，顺便整理了下笔记，记录下吧~ Promise 是什么？ 用于异步计算。 可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果。 可以在对象之间传递和操作Promise，帮助我们处理队列。 ...
Promise教程及用法
鹏多多的博客
08-16 801
目录1，介绍2，特点3，缺点4，基本用法5，then6，catch7，finally8，all()9，race()10，allSettled()11，any()12，现有对象转为Promise对象13，实战用法13.1，小程序request13.2，图片加载13.3，封装Toast 1，介绍 Promise是异步编程的一种解决方案，比回调函数和事件更合理且更强大。可以理解为一个容器，里面保存着某个未来才会结束的事件的结果。 2，特点 Promise对象有三种状态：pending（进行中）、fulfill
JavaScript异步编程——06-Promise入门详解【万字长文，感谢支持】
——心比天高，仗剑走天涯，保持热爱，奔赴向梦想！低调，谦虚，自律，反思，成长，还算是比较正能量的博主，公益免费传播……内心特别想在AI界做出一些可以推进历史进程影响力的东西(兴趣使然，有点小情怀，也有点使命感呀)…
05-10 1402
史诗级JavaScript异步编程学习，快来订阅专栏吧！
掌握JavaScript Promise：从基础到高级实践
本文档是一本深入讲解ECMAScript ...这本《JavaScript Promise迷你书（中文版）》为JavaScript开发者提供了全面而实用的Promise教程，无论你是初学者还是高级开发人员，都能从中收获到丰富的异步编程知识和实践经验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小小姜鸭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值