欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 财经 > 金融 > 【ajax核心02】底层原理-Promise对象

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

2024/10/23 23:23:28 来源:https://blog.csdn.net/qq_67896626/article/details/139862054  浏览:    关键词:【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>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com