当前位置：首页 > news >正文

Promise详细版

news 2025/8/6 6:00:52

promise基础原理到难点分析
常见的Promise的方法解读
扩展async和await深入分析
逐步分析Promise底层逻辑代码

一、Promise基础

1.什么是promise

为了解决回调地狱：

 //2.设置点击事件btn.onclick = function() {//3.创建ajax实例化对象let xhr = new XMLHttpRequest();//console.log('ajax实例化对象刚刚被创建出来：'，xhr.readState)//4.打开请求xhr.open('get', 'http://iwewiki.com');//console.log('ajax已经打开了请求'，xhr.readState)//5.发送请求(send方法中发送的是请求体数据，只不过get请求是没有请求体的，而post请求有请求体)xhr.send()//6.客户端接收服务端中响应回来的结果数据xhr.onreadystatechange = function() {// 2:已经完成了请求的发送// 3:响应结果途中还没有完全相应结果完毕...ing//4:已经完成了响应完毕结果了//console.log('0',xhr.readState)//7.判断if (xhr.readyState === 4) {//status:请求的状态码200-299之间if (xhr.status >= 200 && xhr.status < 300) {//8.获取请求数据(JSON字符串=>json对象)console.log(JSON.parse(xhr.responseText))}}}}

2.回调地狱

promise构造函数

then方法的返回值的Promise实例化对象的状态取决于回调函数中的内容

如果返回为非Promise实例化对象，则得到一个是成功的Promise。

如果返回的是promise实例化对象，则Promise实例化对象的状态和结构值将直接影响result常量的状态和结果值。

如果为抛出异常，则新的Promise实例化对象（result）为失败的Promise

3.链式调用.then

对数据库进行操作：

封装一个函数来读取文件：

4.Promise.all()

Promise下的all方法作用主要是针对于多个Promise的异步任务的处理

需要接收一个数组类型的参数

返回值：Promise对象，状态也是由数组中的每一个Promise对象的状态来决定的

当所有的Promise对象的状态都是成功的，最终的结果就是成功的Promise，结果值是由每一个Promise的结果值组成的数组。

当所有的Promise对象的状态但凡有一个是失败的，最终也是失败的Promise，结果值就是失败的这个Promise的结果值

5.Promise.allSettled()

allSettled方法用来确定一组异步地操作是否都结束了（不管是成功还是失败），其中包含了fulfilled和rejected两种情况

   <script>function ajax(url) {return new Promise((resolve, reject) => {let xhr = new XMLHttpRequest()xhr.open('get', url, true)xhr.send()xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {resolve(xhr.responseText)} else {reject(xhr.responseText)}}}})}Promise.allSettled([ajax('地址1'), ajax('地址2')]).then(value => {let errorList = value.filter(item => item.status === 'rejected')console.log(errorList)}).catch(reason => {console.log(reason)})</script>

6.Promise.any()

有一个成功就是成功

Promise下的any方法，只要参数中有一个Promise实例化对象的状态为fulfilled，则整体结果就会为fulfilled。

如果所有Promise实力都是rejected，那么结果就是rejected

  <script>let p1 = new Promise((resolve, reject) => {resolve('ok');})let p2 = new Promise((resolve, reject) => {resolve('okk')})let result = Promise.any([p1, p2])console.log(result)</script>