06.Promise的状态和基本使用

news/2024/4/19 14:41:14/文章来源:https://blog.csdn.net/qq_53914247/article/details/136526746

一.认识Promise

1. 什么是 Promise ?

  • Promise 对象用于表示一个异步操作的最终完成(或失败)及其结构值

2. Promise 的好处是什么?

  • 逻辑更清晰(成功或失败会关联后续的处理函数)

  • 了解 axios 函数内部运作的机制

    在这里插入图片描述

  • 能解决回调函数地狱问题(后面会讲到),今天先来看下它的基础使用

3. Promise 管理异步任务,语法怎么用?

// 1. 创建 Promise 对象
const p = new Promise((resolve, reject) => {// 2. 执行异步任务-并传递结果// 成功调用: resolve(值) 触发 then() 执行// 失败调用: reject(值) 触发 catch() 执行
})
// 3. 接收结果
p.then(result => {// 成功
}).catch(error => {// 失败
})

4. 示例代码:

/*** 目标:使用Promise管理异步任务
*/
// 1. 创建Promise对象
const p = new Promise((resolve, reject) => {// 2. 执行异步代码setTimeout(() => {// resolve('模拟AJAX请求-成功结果')reject(new Error('模拟AJAX请求-失败结果'))}, 2000)
})// 3. 获取结果
p.then(result => {console.log(result)
}).catch(error => {console.log(error)
})

二.认识Promise 的状态

1. 为什么要了解 Promise 的三种状态 ?

  • 知道 Promise 对象如何关联的处理函数,以及代码的执行顺序

2. Promise 有哪三种状态?

每个 Promise 对象必定处于以下三种状态之一

  1. 待定(pending):初始状态,既没有被兑现,也没有被拒绝
  2. 已兑现(fulfilled):操作成功完成
  3. 已拒绝(rejected):操作失败

状态的英文字符串,可以理解为 Promise 对象内的字符串标识符,用于判断什么时候调用哪一个处理函数

3. Promise 的状态改变有什么用?

调用对应函数,改变 Promise 对象状态后,内部触发对应回调函数传参并执行

在这里插入图片描述

4. 注意:

每个 Promise 对象一旦被兑现/拒绝,那就是已敲定了,状态无法再被改变

三.使用 Promise 和 XHR获取省份列表

1. 需求:

使用 Promise 和 XHR 请求省份列表数据并展示到页面上

在这里插入图片描述

2. 步骤:

  1. 创建 Promise 对象

  2. 执行 XHR 异步代码,获取省份列表数据

  3. 关联成功或失败回调函数,做后续的处理

    错误情况:用地址错了404演示

3. 核心代码如下:

/*** 目标:使用Promise管理XHR请求省份列表*  1. 创建Promise对象*  2. 执行XHR异步代码,获取省份列表*  3. 关联成功或失败函数,做后续处理
*/
// 1. 创建Promise对象
const p = new Promise((resolve, reject) => {// 2. 执行XHR异步代码,获取省份列表const xhr = new XMLHttpRequest()xhr.open('GET', 'http://hmajax.itheima.net/api/province')xhr.addEventListener('loadend', () => {// xhr如何判断响应成功还是失败的?// 2xx开头的都是成功响应状态码if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})xhr.send()
})// 3. 关联成功或失败函数,做后续处理
p.then(result => {console.log(result)document.querySelector('.my-p').innerHTML = result.list.join('<br>')
}).catch(error => {// 错误对象要用console.dir详细打印console.dir(error)// 服务器返回错误提示消息,插入到p标签显示document.querySelector('.my-p').innerHTML = error.message
})

小结

1. 什么是 Promise ?

表示(管理)一个异步操作最终状态和结果值的对象

2. 为什么学习 Promise ?

成功和失败状态,可以关联对应处理函数,了解 axios 内部运作的原理

3. Promise 使用步骤?

  1. new Promise 对象执行异步任务。2. 用 resolve 关联 then 的回调函数传递成功结果。3.用 reject 关联 catch 的回调函数传递失败结果。

4. Promise 对象有哪 3 种状态?

待定 pending,已兑现 fulfilled,已拒绝 rejected

5. Promise 状态有什么用?

状态改变后,如何关联处理函数

6. AJAX 如何判断是否请求响应成功了?

响应状态码在大于等于 200 并且小于 300 的范围是成功的

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Python实现银行卡识别

在本文中将介绍如何使用Python和深度学习技术来实现银行卡识别功能。银行卡识别是一个在金融、安全等领域具有重要应用的问题&#xff0c;将使用深度学习模型来实现银行卡图像的识别和分类。 目录 引言数据集准备预处理和特征提取模型选择与训练模型评估与性能优化部署与应用 引…

Redis--线程模型详解

Redis线程模型 Redis内部使用的文件事件处理器&#xff08;基于Reactor模式开发的&#xff09;file event handler是单线程的&#xff0c;所以Redis线程模型才叫单线程模型&#xff0c;它采用IO多路复用机制同时监听多个socket&#xff0c;当被监听的socket准备好执行accep、r…

【Java面试/24春招】技术面试题的准备

Spring MVC的原理 Mybatis的多级缓存机制 线程池的大小和工作原理 上述问题&#xff0c;我们称为静态的问题&#xff0c;具有标准的答案&#xff0c;而且这个答案不会变化&#xff01; 如果没有Spring&#xff0c;会怎么样&#xff1f;IOC这个思想是解决什么问题&#xff1f…

男人的玩具系统wordpress外贸网站主题模板

垂钓用品wordpress外贸模板 鱼饵、鱼竿、支架、钓箱、渔线轮、鱼竿等垂钓用品wordpress外贸模板。 https://www.jianzhanpress.com/?p3973 身体清洁wordpress外贸网站模板 浴盐、防蚊液、足部护理、沐浴液、洗手液、泡澡用品wordpress外贸网站模板。 https://www.jianzhan…

基于OpenCV的图形分析辨认02

目录 一、前言 二、实验目的 三、实验内容 四、实验过程 一、前言 编程语言&#xff1a;Python&#xff0c;编程软件&#xff1a;vscode或pycharm&#xff0c;必备的第三方库&#xff1a;OpenCV&#xff0c;numpy&#xff0c;matplotlib&#xff0c;os等等。 关于OpenCV&…

关于比特币的AI对话

【ChatGPT】 比特币源码开源吗&#xff1f; 是的&#xff0c;比特币的源码是开源的。比特币项目是在MIT许可证下发布的&#xff0c;这意味着任何人都可以查看、修改、贡献和分发代码。比特币的源码托管在GitHub上&#xff0c;可以通过下面的链接进行访问&#xff1a; https://g…

Python】深度学习基础知识——随机梯度下降详解和示例

本文通过原理和示例对随机梯度下降进行了详解&#xff0c;并和梯度下降进行了对比分析&#xff0c;简单易懂。 随机梯度下降原理示例 动态学习率动态学习率示例 总结 随机梯度下降 原理 示例 import torch import torch.nn as nn import matplotlib.pyplot as pltdef train_2…

Day14:信息打点-主机架构蜜罐识别WAF识别端口扫描协议识别服务安全

目录 Web服务器&应用服务器差异性 WAF防火墙&安全防护&识别技术 蜜罐平台&安全防护&识别技术 思维导图 章节知识点 Web&#xff1a;语言/CMS/中间件/数据库/系统/WAF等 系统&#xff1a;操作系统/端口服务/网络环境/防火墙等 应用&#xff1a;APP对象/…

Codeforces Round 930 (Div. 2 ABCDEF题) 视频讲解

A. Shuffle Party Problem Statement You are given an array a 1 , a 2 , … , a n a_1, a_2, \ldots, a_n a1​,a2​,…,an​. Initially, a i i a_ii ai​i for each 1 ≤ i ≤ n 1 \le i \le n 1≤i≤n. The operation swap ( k ) \texttt{swap}(k) swap(k) for an…

STM32 学习8 USART串口通讯与printf重定向

STM32 学习8 USART串口通讯 一、串口通信介绍1. USART介绍2. UART介绍3. STM32 F103ZET6串口资源4. STM32 USART作用5. STM32 USART框图引脚说明 6. 寄存器USART_SR&#xff08;Status Register&#xff0c;状态寄存器&#xff09;&#xff1a;USART_DR&#xff08;Data Regist…

算力调度和云计算有何区别

Canalys发布的研究报告显示&#xff0c;2023年第二季度&#xff0c;全球云基础设施服务支出增长16%&#xff0c;达到724亿美元。 此前云厂商们的高速增长&#xff0c;主要归功于大规模的企业数字化转型和上云。当前市场的增速放缓&#xff0c;除了上云普及带来的市场增量见顶&…

Nginx启动服务

Nginx启动服务 一、启动前置 下载地址 如已安装Docker&#xff0c;下一步拉取Nginx最新的Docker镜像&#xff1a; docker pull nginx:latest查看拉取下来的镜像&#xff1a; docker images二、启动服务 创建Docker容器&#xff1a; docker run --name {projectname} -p 80…

Springboot配置MySQL数据库

Springboot配置MySQL数据库 一、创建springboot项目&#xff0c;并添加如下依赖 <dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><scope>runtime</scope> </dependency>二、在applica…

AMDGPU KFD Test 编译使用

ROCT-Thunk-Interface是一个用于在ROCm软件堆栈中提供设备无关性的层。它是ROCm的一部分&#xff0c;允许不同的硬件平台&#xff08;如AMD GPU和Intel CPU&#xff09;使用相同的API进行计算。 要安装ROCT-Thunk-Interface&#xff0c;首先需要创建一个新的目录&#xff0c;并…

微信小程序开发系列(二十)·wxml语法·setData()修改对象类型数据、ES6 提供的展开运算符、delete和rest的用法

目录 1. 新增单个、多个属性 1.1 新增单个属性 1.2 新增多个属性 2. 修改单个、多个属性 2.1 修改单个属性 2.2 修改多个属性 3. 优化 3.1 ES6 提供的展开运算符 3.2 Object.assign()将多个对象合并为一个对象 4. 删除单个、多个属性 4.1 删除单个属性 …

跨链桥的类型总结/相关的名词解释

首先&#xff0c;这是一个会持续更新的文章&#xff0c;我会不断把自己了解到的跨链桥名词解释更新在这里。 跨链桥类型 基于传输方式分类&#xff1a; Lock and Mint&#xff1a;在一条链上锁定资产&#xff0c;在另一条链上铸造等价资产liqidity pool&#xff1a;在不同链…

Apifox

⭐⭐⭐ 推荐&#xff1a;人工智能助手 接口测试是软件开发过程中不可或缺的一环&#xff0c;它有助于确保各个系统组件能够正常交互&#xff0c;提高软件的质量和稳定性。随着现代软件开发趋向于微服务架构&#xff0c;接口测试变得更加重要。在众多接口测试工具中&#xff0c…

Android 日志原理解析

一、Logcat 二、Dumpsys C:\Users\pengcheng.ding>adb shell dumpsys --help usage: dumpsysTo dump all services. or:dumpsys [-t TIMEOUT] [--priority LEVEL] [--clients] [--dump] [--pid] [--thread] [--help | -l | --skip SERVICES | SERVICE [ARGS]]--help: show…

基于OpenCV的图形分析辨认01

目录 一、前言 二、实验目的 三、实验内容 四、实验过程 一、前言 编程语言&#xff1a;Python&#xff0c;编程软件&#xff1a;vscode或pycharm&#xff0c;必备的第三方库&#xff1a;OpenCV&#xff0c;numpy&#xff0c;matplotlib&#xff0c;os等等。 关于OpenCV&…

目标检测评估指标

目录 一、检测精度1、TP、FP、TN、FN概念正样本和负样本TP(True Positive---正确的正向预测)FP(False Positive---错误的正向预测&#xff09;FN(False Negative---错误的负向预测)TN(True Negative---正确的负向预测) 2、Precision(准确率)和Recall(召回率)3、P-R curve &…