AJAX的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</title>

</head>

<!-- Promise:对象用于表示一个异步操作的最终完成(或失败)及其结果值

好处:

1.逻辑更清晰

2.了解axios函数内部运作机制

3.能解决回调函数地域问题

为什么学习Promise?

成功和失败状态,可以关联对应处理程序,了解axios内部原理

-->

<!-- Promise的三种状态

待定(pending):初始状态,既没有被兑现,也没有被拒绝

已兑现(fulfilled):意味着,操作成功完成

已拒接(rejected):意味着,操作失败

注意:Promise对象一旦被兑现/拒接就是已敲定了,状态无法再被改变

Promise作用:状态改变后调用关联的处理函数

-->

<body>

<script>

/**

* 目标:使用Promise管理异步任务

*/

// 1. 创建Promise对象(pending待定状态)

const p = new Promise((resolve, reject) => {

// 成功调用:resolve(值)触发then()执行

// 失败调用:reject(值)触发catch()执行

// Promise对象创建时,这里的代码都会执行了

// 2. 执行异步代码

setTimeout(() => {

// resolve('模拟AJAX请求-成功结果')

// resolve() => 'fulfilled状态-已兑现' => then()

reject(new Error('模拟AJAX请求-失败结果'))

// reject() => 'rejected状态-已拒绝' => catch()

}, 2000)

})

// 3. 获取结果

p.then(result => {

console.log(result)

// 成功调用

}).catch(error => {

console.log(error)

// 失败调用

})

</script>

</body>

</html>

相关推荐
一只叫煤球的猫40 分钟前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel2 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼2 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手6 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法6 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku6 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode6 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu6 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu6 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu6 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript