【ajax核心02】底层原理-Promise对象

目录

一:promise对象是什么

二:语法(Promise使用步骤)

三:Promise-三种状态


一:promise对象是什么

Promise 对象代表异步操作最终的完成(或失败)以及其结果值。

即Promise对象是用来管理一个异步任务最终状态结果值(then、catch)的对象

二:语法(Promise使用步骤)

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

三:Promise-三种状态

一个Promise对象,必然处于以下几种状态之一

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

Promise对象一旦被兑现/拒绝两种状态中一种设置,就无法再更改状态

四:Promise.all

Promise.all用于合并多个Promise对象,等待所有Promise对象中请求同时成功(或某一个失败)后,再做后续逻辑

流程图如下:

语法:

const p = Promise.all([Promise对象,Promise对象,....])
p.then(result=>{//result结果:[Promise对象成功结果,Promise对象成功结果....]
}).catch(error=>{//第一个失败的Promise对象,抛出的异常
})

同时查询北京、上海、广州、深圳四地天气

<!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的all方法</title>
</head><body><ul class="my-ul"></ul><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*** 目标:掌握Promise的all方法作用,和使用场景* 业务:当我需要同一时间显示多个请求的结果时,就要把多请求合并* 例如:默认显示"北京", "上海", "广州", "深圳"的天气在首页查看* code:* 北京-110100* 上海-310100* 广州-440100* 深圳-440300*/const bObj = axios({ url: "https://hmajax.itheima.net/api/weather", params: { city: '110100' } })const sObj = axios({ url: "https://hmajax.itheima.net/api/weather", params: { city: '310100' } })const gObj = axios({ url: "https://hmajax.itheima.net/api/weather", params: { city: '440100' } })const szObj = axios({ url: "https://hmajax.itheima.net/api/weather", params: { city: '440300' } })const p = Promise.all([bObj, sObj, gObj, szObj])p.then(result => {// console.log(result);const Str = result.map(element => {return `<li>${element.data.data.area}--${element.data.data.weather}</li>`}).join('')document.querySelector('.my-ul').innerHTML = Str}).catch(error => {console.dir(error)})</script>
</body></html>

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

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

相关文章

工业边缘计算网关

1 介绍 HINETG系列边缘计算网关&#xff08;Linux操作系统&#xff09;&#xff0c;是华辰智通的—款面向工业现场设备接入、数据采集、设备监控的工业级边缘计算网关。采用ARM Cortex-A7 800MHz高性能CPU,拥有以太网、串口、CAN口、IO口等丰富的接口&#xff0c;支持以太网、…

力压GPT-4o!新王Claude 3.5 Sonnet来了,直接免费可用

如今&#xff0c;大模型领域更卷了&#xff01; 前脚 OpenAI 发布 GPT4o&#xff0c;硬控全场&#xff0c;后脚就被最大的竞争对手 Anthropic 超越了。 刚刚&#xff0c;Anthropic 发布了全新大模型 Claude 3.5 Sonnet&#xff0c;号称是迄今为止最智能的模型。 据介绍&#x…

大模型项目落地时,该如何估算模型所需GPU算力资源

近期公司有大模型项目落地。在前期沟通时,对于算力估算和采购方案许多小伙伴不太了解,在此对相关的算力估算和选择进行一些总结。 不喜欢过程的可以直接 跳到HF上提供的模型计算器 要估算大模型的所需的显卡算力,首先要了解大模型的参数基础知识。 大模型的规模、参数的理解…

为什么选择Xinstall CPA结算系统?因为它能帮您解决这些痛点!

在App推广和运营的道路上&#xff0c;我们时常面临着各种挑战和痛点。其中&#xff0c;结算系统的复杂性和不透明性往往成为制约我们发展的瓶颈。然而&#xff0c;有了Xinstall CPA结算系统&#xff0c;这些问题将迎刃而解&#xff0c;让您的App推广之路更加顺畅和高效。 一、…

前端开发的工厂设计模式

在前端开发中&#xff0c;工厂设计模式&#xff08;Factory Pattern&#xff09;是一种非常有用的设计模式&#xff0c;能够帮助我们在创建对象时减少代码的重复性和复杂性。 一、工厂设计模式概述 工厂设计模式是一种创建型设计模式&#xff0c;主要目的是定义一个用于创建对…

如何利用“AI交互数字人+展厅”拓展文娱消费空间?

打造新生代潮玩聚集地&#xff0c;打造演艺新空间&#xff0c;促进虚拟现实体验等文娱业态场景创新&#xff0c;成为了当下发展文旅消费新场景的一大重要手段。数字人汇集了虚拟现实、增强现实、全息投影、人工智能、实时传输语音合成等数字技术&#xff0c;可以利用数字人重构…

Python 语法基础一

1.变量 python 中变量很简单&#xff0c;不需要指定数据类型&#xff0c;直接使用等号定义就好。python变量里面存的是内存地址&#xff0c;也就是这个值存在内存里面的哪个地方&#xff0c;如果再把这个变量赋值给另一个变量&#xff0c;新的变量通过之前那个变量知道那个变量…

大模型赋能全链路可观测性:运维效能的革新之旅

目录 全链路可观测工程与大模型结合---提升运维效能 可观测性&#xff08;Observability&#xff09;在IT系统中的应用及其重要性 统一建设可观测数据 统一建设可观测数据的策略与流程 全链路的构成和监控形态 云上的全链路可视方案 为什么一定是Copilot 大模型的Copilo…

vue+fineReport 使用前端搜索+报表显示数据

--fineReprot 将需要搜索的参数添加到模版参数 sql&#xff1a; --前端传递参数 注&#xff1a;因为每次点击搜索的结果需要不一样&#xff0c;还要传递一个时间戳的参数&#xff1a; let timesamp new Date().getTime()

云计算【第一阶段(18)】磁盘管理与文件系统 分区格式挂载(一)

目录 一、磁盘基础 二、磁盘结构 2.1、机械硬盘 2.2、固态硬盘 2.3、扩展移动硬盘 2.4、机械磁盘的一些计算&#xff08;了解&#xff09; 2.5、磁盘接口类型 二、Linux 中使用的文件系统类型 2.1、磁盘分区的表示 2.1.1、主引导记录(MBR) 2.1.2、Linux中将硬盘、分…

MCU的最佳存储方案CS创世 SD NAND

大家都知道MCU是一种"麻雀"虽小&#xff0c;却"五脏俱全"的主控。它的应用领域非常广泛&#xff0c;小到手机手表&#xff0c;大到航空航天的设备上都会用到MCU.市面上目前几个主流厂商有意法半导体&#xff08;其中最经典的一款就是STM32系列&#xff09;…

布尔运算00

题目链接 布尔运算 题目描述 注意点 运算符的数量不超过 19 个布尔表达式由 0 (false)、1 (true)、& (AND)、 | (OR) 和 ^ (XOR) 符号组成算出有几种可使该表达式得出 result 值的括号方法 解答思路 可以使用动态规划根据左右两侧区间不同结果相应组合数量计算得出当前…

宠物空气净化器真的有必要买吗?养宠家庭建议看完这篇再考虑入手

可爱的猫咪是爱猫人士的心头好&#xff0c;但猫咪们的掉毛问题却一直困扰着不少人&#xff0c;猫浮毛在空气中乱飘&#xff0c;不但污染环境&#xff0c;还可能引发过敏和哮喘等呼吸道疾病。 作为一个家电推荐官&#xff0c;我有对付猫咪浮毛、异味的神器———宠物空气净化器…

将CSV、Excel、XML文件转换为MySQL数据库

在平时的工作中&#xff0c;经常会遇到需要将文件数据导入到数据库中的情况。有些客户之前可能只使用Excel表格作为记录工具&#xff0c;但当数据量达到一定程度或者需要将数据导入到其他系统中时&#xff0c;就会很emo,因为Excel表格虽然方便&#xff0c;但在数据处理和管理方…

在 UBUNTU 22.04 上逐步构建 Postal SMTP 服务器

构建 Postal SMTP 服务器来发送批量电子邮件是电子邮件营销人员的不错选择。Postal 功能非常强大&#xff0c;并拥有大量开发人员的支持。它是一个用 JavaScript 和 Ruby 编写的开源邮件服务器脚本。它可用于构建内部 SMTP 服务器&#xff0c;就像 Mailgun、Sendgrid、Mailchim…

慢动作视频怎么制作?5种方法,轻松制作慢动作视频

在短视频风靡的当下&#xff0c;慢动作视频凭借其独特的视觉效果和引人入胜的节奏感&#xff0c;成为了吸引观众眼球的利器。你是否也想知道如何制作这种令人心动的慢动作视频呢&#xff1f;下面教大家5种能够制作出慢动作视频的方法&#xff0c;一起来学习下吧。 方法一&#…

openEuler 22.03 (LTS-SP1)服务器用ntpd同步GPS时间服务器的案例

本文记录了openEuler 22.03 (LTS-SP1)的二级时间服务器用chronyd不能自动同步GPS时间服务器&#xff0c;改用ntpd同步GPS时间服务器成功的案例 一、环境简述 1、本环境中有两台GPS一级时间服务器&#xff0c;IP如下&#xff1a; 192.168.188.66 192.168.188.74 2、有一台o…

分布式kettle调度管理平台简介

介绍 Kettle&#xff08;也称为Pentaho Data Integration&#xff09;是一款开源的ETL&#xff08;Extract, Transform, Load&#xff09;工具&#xff0c;由Pentaho&#xff08;现为Hitachi Vantara&#xff09;开发和维护。它提供了一套强大的数据集成和转换功能&#xff0c…

51循迹小车(蓝牙+循迹+超声波+舵机+避障L298N)

基本驱动 L298N电机驱动模块负责供电和控制电机驱动 将电池12V供电接到12V供电上&#xff0c;作为输入。单片机及其他器件供电可以使用5V供电&#xff0c;这里的GND都接到一起。 输出A和输出B接到电机上&#xff0c;负责给电机供电和控制电机。 通道A使能和通道B使能以及逻…

【Confluence】markdown格式转换为Confluence

简单的文本可以使用网站来快速转换&#xff0c;但是发现很多格式不能正确转换&#xff0c;所以研究了一个Py的方法来实现&#xff0c;如下&#xff1a; 安装Py插件 本方法主要借用markdown2 来实现&#xff0c;开始之前需要先安装一些库。 pip install markdown2 beautiful…