一、什么是Promise?
定义:Promise对象用于表示一个异步操作的最终完成(或失败)及其结果值。
二、为什么学习Promise?
> 成功和失败状态,可以关联对应处理程序
> 了解 axios 内部原理
三、Promise使用步骤?
四、Promise - 三种状态
1. 作用:了解Promise对象如何关联的处理函数,以及代码执行顺序
2. 概念:一个Promise对象,必然处于以下几种状态之一
> 待定(pending):初始状态,既没有被兑现,也没有被拒绝
> 已兑现(fulfilled):意味着,操作成功完成
> 已拒绝(rejected):意味着,操作失败
注意:Promise对象一旦被兑现/拒绝就是已敲定了,状态无法再被改变
五、Promise 状态有什么用?
> 状态改变后,调用关联的处理函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//创建promise对象
const p = new Promise((resolve, reject) => {
console.log('Promise对象创建时,这里的代码都会执行')
//执行异步代码
setTimeout(() => {
// resolve()=>fulfilled状态-已兑现=>then()
resolve('模拟AJAX请求——成功结果')
// reject()=>rejected状态-已拒绝=>catch()
// reject(new Error('模拟AJAX请求——失败结果'))
}, 2000)
})
console.log(p)
//获取结果
p.then(result => {
console.log(result)
}).catch(error => {
console.log(error)
})
</script>
</body>
</html>
六、案例
需求:使用 Promise + XHR 获取省份列表,并展示到页面上
步骤:
1.创建 Promise 对象
2.执行 XHR 异步代码,获取省份列表
3.关联成功或失败函数,做后续处理
<!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+XHR_获取省份列表</title>
</head>
<body>
<p class="my-p"></p>
<script>
/**
* 目标:使用Promise管理XHR请求省份列表
* 1. 创建Promise对象
* 2. 执行XHR异步代码,获取省份列表
* 3. 关联成功或失败函数,做后续处理
*/
const p = new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.open('get', 'http://ajax-api.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()
})
//获取成功或失败,做后续处理
p.then(result => {
console.log(result)
//打印成功信息写到p标签
document.querySelector('.my-p').innerHTML = result.data.join('<br>')
}).catch(error => {
console.dir(error)
//返回错误信息写到p标签
document.querySelector('.my-p').innerHTML = error.message
})
</script>
</body>
</html>