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>

相关推荐
南雨北斗3 分钟前
Vue 3 修饰符(Modifiers)
前端
会豪3 分钟前
工业仿真(simulation)--前端(七)--消息栏
前端
Jinuss27 分钟前
Vue3源码reactivity响应式篇之computed计算属性
前端·vue3
落日沉溺于海27 分钟前
React From表单使用Formik和yup进行校验
开发语言·前端·javascript
知识分享小能手29 分钟前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
会豪32 分钟前
工业仿真(simulation)--前端(五)--标尺,刻度尺
前端
会豪33 分钟前
工业仿真(simulation)--前端(四)--画布编辑(2)
前端
an__ya__35 分钟前
Vue数据响应式reactive
前端·javascript·vue.js
苦逼的搬砖工38 分钟前
Flutter UI Components:闲来无事,设计整理了这几年来使用的UI组件库
前端·flutter
想买Rolex和Supra的凯美瑞车主40 分钟前
Taro + Vite 开发中 fs.allow 配置问题分析与解决
前端