Promise-异步回调

news2024/12/26 21:53:06

1.理解Promise

promise是ES6提出的异步编程的新的解决方案，通过链式调用解决ajax回调地狱

从语法上看，promise是一个构造函数，自己身上有all、reject、resolve方法，原型上有then、catch方法
从功能上看，Promise对象用来封装一个异步请求操作并接受成功/失败时候的结果
在这里插入图片描述

2.Promise对象三种状态

promise对象中 PromiseState属性 ，这个属性有三种状态，分别是一下：
pending：等待中，或者进行中，还没有得到结果
resolved/fullfilled：执行成功
rejected：执行失败
这三种状态不受外界影响，而且状态只能从pending改变为resolved或者rejected，并且不可逆。

Promise对象的值
实例对象中的另外一个属性 PromiseResult
保存着异步任务【成功/失败】的结果，可以被resolve或者reject函数修改，修改后的结果可以被then函数接收到

在这里插入图片描述
then方法返回一个新的promise对象
①实例化一个Promise对象
②Promise作为一个构造函数，接受一个函数类型的值，这个函数有两个参数，分别是resolve reject
③当异步任务执行成功时候，调用resolve函数，将promise对象的状态修改为resolved，然后调用then方法中的第一个回调函数，并返回一个新的Promise对象
④当异步任务执行失败的时候，调用reject函数，将Promise对象的状态修改为rejected，然后调用then方法中的第二个回调函数，并返回一个新的Promise对象

3.Promise的基本使用

const promise = new Promise(function(resolve, reject) {
  // ... some code
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(reason);
  }
});

Promise作为一个构造函数，在实例化一个对象过程中，接受一个参数，这个参数是一个函数类型的值，这个函数里面有两个参数，分别是resolve、reject，当异步任务执行成功的时候，调用resolve函数，将promise对象的状态修改为resolved，并将异步操作的结果作为参数传递出去；异步任务执行失败的时候，调用reject函数，状态修改为rejected，并将异步操作的错误，作为参数reason传递出去
在这里插入图片描述
Promise实例 生成之后，可以调用then方法分别指定resolved状态和rejected状态的回调函数
then方法有两个参数，第一个参数是成功时候的回调，第二个参数是失败的时候的回调 接受构造函数中处理的状态的变化，并分别处理

promise.then(function(value) {
  // success
}, function(reason) {
  // failure
});

实例如下：

// 创建一个新的p对象promise
const p = new Promise((resolve, reject) => { // 执行器函数
  // 执行异步操作任务
  setTimeout(() => {
    const time = Date.now() 
    // 如果当前时间是偶数代表成功，否则失败
    if (time % 2 == 0) {
      // 如果成功，调用resolve(value)
      resolve('成功的数据，time=' + time)
    } else {
      // 如果失败，调用reject(reason)
      reject('失败的数据，time=' + time)
    }
  }, 1000);
})

p.then(
  value => { // 接收得到成功的value数据 onResolved
    console.log('成功的回调', value)  // 成功的回调 成功的数据，time=1615015043258
  },
  reason => { // 接收得到失败的reason数据 onRejected
    console.log('失败的回调', reason)    // 失败的回调 失败的数据，time=1615014995315
  }
)

Promise的封装AJAX请求

<script>
        function sendAJAX(url) {
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                //初始化
                xhr.open('GET', url)
                    //发送数据
                xhr.send()
                xhr.responseType = 'json'

                xhr.onreadystatechange = function() {
                    //响应已经完成，可以获取服务器响应了
                    if (xhr.readyState === 4) {
                        //状态码 2开头表示响应成功
                        if (xhr.status >= 200 && xhr.status < 300) {
                            resolve(xhr.response)
                        } else {
                            reject(xhr.status)
                        }
                    }
                }
            })
        }
        sendAJAX('https://api.vvhan.com/api/covid').then(value => {
            console.log(value);
        }, reason => {
            console.log(reason);
        })
    </script>

4. Promise的API

1.Promise构造函数:Promise(executor){}

executor函数：同步执行(resolve,reject)=>{}
resolve函数：内部定义成功时候调用的函数resolve(value)
reject函数：内部定义失败时候调用的函数reject(reason)
executor是执行器函数，会在Promise内部立即同步回调，异步操作resolve/reject就在executor中执行
在这里插入图片描述

2.Promise.prototype.then 方法：p.then(onResolved, onRejected)

onResolved 函数：成功的回调函数 (value) => {}
onRejected 函数：失败的回调函数 (reason) => {}

不管成功还是失败，都会返回一个新的Promise对象

3.Promise.prototype.catch 方法：p.catch(onRejected)

只能指定失败的回调
catch()相当于then(null,onRejected)

//
        console.dir(Promise)
        let p = new Promise((resolve, reject) => {
            // ** 同步调用
            console.log(111);
            //修改 promise 对象的状态
            // reject('error');
        });

        console.log(222);

        //执行 catch 方法
        // p.catch(reason => {
        //     console.log(reason);
        // });

4.Promise.resolve方法：Promise.resolve(value)

value:将被Promise对象解析的参数，或者是一个成功/失败的Promise对象
返回：返回一个带着给定值解析过的 Promise 对象，如果参数本身就是一个 Promise 对象，则直接返回这个 Promise 对象。
在这里插入图片描述
如果resolve() 中的参数是非Promise对象，那么返回一个成功状态的Promise对象
如果resolve() 中的参数是Promise对象，那么返回的结果由这个Promise对象的返回结果决定
只有resolve()或者reject()函数才能改变PromiseResult的值，then()或者catch()能够接收到这个值

5.Promise.reject方法：Promise.reject(reason)

reason失败的原因，reject总是返回失败状态的Promise对象
在这里插入图片描述

总之，Promise.resolve()/Promise.reject() 用来快速得到Promise对象

//产生一个成功值为1的promise对象
new Promise((resolve, reject) => {
 resolve(1)
})
//相当于
const p1 = Promise.resolve(1)
const p2 = Promise.resolve(2)
const p3 = Promise.reject(3)

p1.then(value => {console.log(value)}) // 1
p2.then(value => {console.log(value)}) // 2
p3.catch(reason => {console.log(reason)}) // 3

6.Promise.all方法：Promise.all()

参数是包含n个promise的数组
返回一个新的promise，只有所有的promise都成功才成功，只要有一个失败了就直接失败
在这里插入图片描述
在这里插入图片描述

7.Promise.race方法：Promise.race()

参数是，包含n个promise对象的数组
返回一个新的promise对象，第一个完成的promise的状态结果就是最终的结果状态，总之，谁先完成就输出谁，不管他是成功or失败

5.promise中的重要问题

1.修改Promise对象状态的三种方法

在这里插入图片描述

1.resolve将promise对象状态：pending=>resolved/fullfilled
2.reject pending => rejected
3.throw 抛出一个异常 pending => rejected

2.Promise对象可以指定多个回调

在这里插入图片描述

3.改变promise对象的状态和指定回调函数的先后顺序

resolve()、reject（）改变promise对象的状态，then/catch指定回调函数
执行器函数会在promise中同步回调，执行器函数中的resolve reject是异步操作
在这里插入图片描述

<script>
        //当执行器函数中的任务是一个同步任务，先改变状态后指定回调
        //当执行器函数中的任务一个异步任务时候，先指定回调后改变状态
        //执行器函数中一般都是异步任务，  添加定时器之后变成了异步任务
        let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('OK');
            }, 1000);
        });

        p.then(value => {
            console.log(value);
        }, reason => {

        })
    </script>

如果先指定回调，会先保存当前指定的回调函数，当状态改变时（同时指定数据），执行回调函数
如果先改变状态（同时指定数据），后指定回调，直接执行回调函数

4.promise.then() 返回的新 promise 的结果状态由什么决定？

简述：由then()指定的回调函数执行的结果决定
在这里插入图片描述

详细：
①throw抛出一个异常，那么then返回的新promise对象的状态变为rejected，reason为抛出的异常
在这里插入图片描述
②回调函数的返回结果是一个非promise对象，新promise对象的状态变为resolved，value为返回的结果
在这里插入图片描述
③如果回调函数返回的结果是一个新promise对象，那么then函数返回的promise对象的结果同这个新promise对象的结果
在这里插入图片描述

5.promise如何串联多个操作任务

（1）promise 的 then() 返回一个新的 promise，可以并成 then() 的链式调用

（2）通过 then 的链式调用串联多个同步/异步任务

let p = new Promise((resolve, reject) => {
  setTimeout(() => {
      resolve('OK');
  }, 1000);
});

p.then(value => {
  return new Promise((resolve, reject) => {
      resolve("success");
  });
}).then(value => {
  console.log(value); // success
}).then(value => {
  console.log(value); // undefined
})

6.promise异常穿透(传透)

在这里插入图片描述
所以失败的结果是一层一层处理下来的，最后传递到 catch 中。

或者，将 reason => {throw reason} 替换为 reason => Promise.reject(reason) 也是一样的

7.中断promise链

new Promise((resolve, reject) => {
   //resolve(1)
   reject(1)
}).then(
  value => {
    console.log('onResolved1()', value)
    return 2
  }
).then(
  value => {
    console.log('onResolved2()', value)
    return 3
  }
).then(
  value => {
    console.log('onResolved3()', value)
  }
).catch(
  reason => {
    console.log('onRejected1()', reason)
    return new Promise(() => {}) // 返回一个pending的promise
  }
).then(
  value => {
    console.log('onResolved4()', value)
  },
  reason => {
    console.log('onRejected2()', reason)
  }
)
// onRejected1() 1

在 catch 中返回一个新的 promise，且这个 promise 没有结果。

由于，返回的新的 promise 结果决定了后面 then 中的结果，所以后面的 then 中也没有结果。

这就实现了中断 promise链的效果。

参考

参考大佬的promise

尚硅谷 promise教程

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/389871.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

BloomFilter原理学习

BloomFilter原理学习

文章目录BloomFilter简单介绍BloomFilter中的数学知识fpp(误判率/假阳性)的计算k的最小值公式总结编程语言实现golang的实现[已知n, p求m和k](https://github.com/bits-and-blooms/bloom/blob/master/bloom.go#L133)参考BloomFilter简单介绍 BloomFilter我们可能经常听到也在使…
阅读更多...
瑞吉外卖——day2

瑞吉外卖——day2

目录 一、新增员工 二、查询分页数据 三、启用、禁用员工账户、编辑员工信息 一、新增员工 点击左上角新增员工 页面如下&#xff1a; 我们随便填数据 &#xff0c;点击保存&#xff0c;请求的地址如下 返回前端可以看到请求方式为Post 在employeeController中编写对应的代…
阅读更多...
Elasticsearch：图片相似度搜索的 5 个技术组成部分

Elasticsearch：图片相似度搜索的 5 个技术组成部分

作者&#xff1a;Radovan Ondas&#xff0c;Bernhard Suhm 在本系列博文的第一部分中&#xff0c;我们介绍了图像相似度搜索&#xff0c;并回顾了一种可以降低复杂性并便于实施的高级架构。 此博客解释了实现图像相似性搜索应用程序所需的每个组件的基本概念和技术注意事项。 学…
阅读更多...
Python采集本地二手房，一键知晓上万房源信息

Python采集本地二手房，一键知晓上万房源信息

前言 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 所以今天教大家用Python来采集本地房源数据&#xff0c;帮助大家筛选好房。 话不多说&#xff0c;让我们开始愉快的旅程吧~ 更多精彩内容、资源皆可点击文章下方名片获取此处跳转 本文涉及知识点 采集基本流程 requests 发送…
阅读更多...
【Java】Spring Boot整合WebSocket

【Java】Spring Boot整合WebSocket

【Java】Spring Boot整合WebSocket WebSocket简介 WebSocket是一种协议&#xff0c;用于实现客户端和服务器之间的双向通信。它可以在单个TCP连接上提供全双工通信&#xff0c;避免了HTTP协议中的请求-响应模式&#xff0c;从而实现更高效的数据交换。WebSocket协议最初由HTM…
阅读更多...
【计算几何】贝塞尔曲线 B样条曲线简介及其离散化 + Python C++ 代码实现

【计算几何】贝塞尔曲线 B样条曲线简介及其离散化 + Python C++ 代码实现

文章目录一、贝塞尔曲线二、B样条曲线三、Python 代码实现B样条曲线离散化四、C 代码实现B样条曲线离散化4.1 主要代码4.2 其余类4.3 离散效果展示&#xff08;在CAD中展示&#xff09;本文只做简介&#xff0c;关于贝塞尔曲线和B样条曲线的详细介绍&#xff0c;请参考&#xf…
阅读更多...
unity UGUI系统梳理 - 基本布局

unity UGUI系统梳理 - 基本布局

偷懒了&#xff0c;部分节选unity API API 1、矩形工具 为了便于布局&#xff0c;每个 UI 元素都表示为矩形。可使用工具栏中的__矩形工具 (Rect Tool)__ 在 Scene 视图中操纵此矩形。矩形工具既可用于 Unity 的 2D 功能&#xff0c;也可用于 UI&#xff0c;实际上甚至还可用…
阅读更多...
C/C++开发，无可避免的多线程（篇三）.协程及其支持库

C/C++开发，无可避免的多线程（篇三）.协程及其支持库

一、c20的协程概念 在c20标准后&#xff0c;在一些函数中看到co_await、co_yield、co_return这些关键词&#xff0c;这是c20为协程实现设计的运算符。 协程是能暂停执行以在之后恢复的函数。原来我们调用一个功能函数时&#xff0c;只要调用了以后&#xff0c;就要完整执行完该…
阅读更多...
【Kettle-佛系总结】

【Kettle-佛系总结】

Kettle-佛系总结Kettle-佛系总结1.kettle介绍2.kettle安装3.kettle目录介绍4.kettle核心概念1.转换2.步骤3.跳&#xff08;Hop&#xff09;4.元数据5.数据类型6.并行7.作业5.kettle转换1.输入控件1.csv文件输入2.文本文件输入3.Excel输入4.XML输入5.JSON输入6.表输入2.输出控件…
阅读更多...
百度Apollo规划算法——轨迹拼接

百度Apollo规划算法——轨迹拼接

百度Apollo规划算法——轨迹拼接引言轨迹拼接1、什么是轨迹拼接&#xff1f;2、为什么要进行轨迹拼接&#xff1f;3、结合Apollo代码为例理解轨迹拼接的细节。参考引言 在apollo的规划算法中&#xff0c;在每一帧规划开始时会调用一个轨迹拼接函数&#xff0c;返回一段拼接轨迹…
阅读更多...
Kubernetes之服务发布

Kubernetes之服务发布

学了服务发现后&#xff0c;svc的IP只能被集群内部主机及pod才可以访问&#xff0c;要想集群外的主机也可以访问svc&#xff0c;就需要利用到服务发布。 NodePort Nodeport服务是外部访问服务的最基本方式。当我们创建一个服务的时候&#xff0c;把服务的端口映射到kubernete…
阅读更多...
【大数据AI人工智能】常见的归一化函数有哪些？分别用数学公式详细介绍

【大数据AI人工智能】常见的归一化函数有哪些？分别用数学公式详细介绍

常见的归一化函数有哪些？分别用数学公式详细介绍一下。 常见的归一化函数 常见的归一化函数包括： Min-Max 归一化Z-Score 归一化Log 归一化Sigmoid 归一化下面分别介绍这些归一化函数以及它们的数学公式。 1. Min-Max 归一化 Min-Max 归一化是将原始数据线性映射到 [0,1]…
阅读更多...
dp模型——状态机模型C++详解

dp模型——状态机模型C++详解

状态机定义状态机顾名思义跟状态有关系&#xff0c;但到底有什么关系呢。在实际解决的时候&#xff0c;通常把状态想成节点&#xff0c;状态的转换想成有向边的有向图&#xff0c;我们来举个例子。相信大家都玩过类似枪战的游戏&#xff08;没玩过的也听说过吧&#xff09;&…
阅读更多...
4.创建和加入通道相关（network.sh脚本createChannel函数分析）[fabric2.2]

4.创建和加入通道相关（network.sh脚本createChannel函数分析）[fabric2.2]

fabric的test-network例子有一个orderer组织、两个peer组织、每个组织一个节点&#xff0c;只有系统通道&#xff08;system-channel&#xff09;&#xff0c;没有其他应用通道。我们可以使用./network.sh createChannel命令来创建一个名为mychannel的应用通道。 一、主要概念 …
阅读更多...
【Java开发】JUC进阶 04：线程池详解

【Java开发】JUC进阶 04：线程池详解

1 线程池介绍由于频繁创建销毁线程要调用native方法比较消耗资源&#xff0c;为了保证内核的充分利用&#xff0c;所以引入了线程池的概念。&#x1f4cc; 线程池优点降低资源消耗提高响应速度方便管理&#x1f4cc; 创建线程池使用Executors创建使用ThreadPoolExecutor创建&am…
阅读更多...
Git图解-为啥是Git？怎么装？

Git图解-为啥是Git？怎么装？

目录 零、学习目标 一、版本控制 1.1 团队开发问题 1.2 版本控制思想 1.2.1 版本工具 二、Git简介 2.1 简介 2.2 Git环境的搭建 三、转视频版 零、学习目标 掌握git的工作流程 熟悉git安装使用 掌握git的基本使用 掌握分支管理 掌握IDEA操作git 掌握使用git远程仓…
阅读更多...
【教程】记录Typecho Joe主题升级与Joe魔改版

【教程】记录Typecho Joe主题升级与Joe魔改版

目录 升级Joe 其他魔改版 Joe主题挺好看的&#xff0c;很早之前我就装了。后来官方升级了主题&#xff0c;但没有给升级教程。这里记录一下我的升级过程&#xff0c;供大家参考。 Joe Github&#xff1a;GitHub - HaoOuBa/Joe: A Theme of Typecho 升级站点&#xff1a;小锋学…
阅读更多...
WSL2使用Nvidia-Docker实现CUDA版本自由切换

WSL2使用Nvidia-Docker实现CUDA版本自由切换

众所周知&#xff0c;深度学习的环境往往非常麻烦&#xff0c;经常不同的项目所依赖的 torch、tensorflow 包对 CUDA 的版本也有不同的要求&#xff0c;Linux 下进行 CUDA 的管理比较麻烦&#xff0c;是一个比较头疼的问题。 随着 WSL2 对物理机显卡的支持&#xff0c;Nvidia-…
阅读更多...
用二极管和电容过滤电源波动，实现简单的稳压 - 小水泵升压改装方案

用二极管和电容过滤电源波动，实现简单的稳压 - 小水泵升压改装方案

简而言之&#xff0c;就是类似采样保持电路&#xff0c;当电源电压因为电机启动而骤降时&#xff0c;用二极管避免电容电压跟着降低&#xff0c;从而让电容上连接的低功耗芯片有一个比较稳定的供电电压。没什么特别的用处&#xff0c;省个LDO 吧&#xff0c;电压跌幅太大的时候…
阅读更多...
最详细Sql语句优化大汇总 面试必问 含解释

最详细Sql语句优化大汇总 面试必问 含解释

欢迎补充和纠正&#xff01;&#xff01;&#xff01; 目录 欢迎补充和纠正&#xff01;&#xff01;&#xff01; 基础知识 相关索引的创建 一条sql语句的执行过程 sql语句关键字的执行顺序 SQL优化 使用explain来分析Sql语句 尽量用varchar代替char 使用数值代替字符…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023