目录
1. Promise介绍
1.1. Promise定义
- Promise对象用于表示（管理）一个异步操作的最终完成(或失败)及其结果值。
编辑
1.2. Promise作用
- 使异步操作逻辑更加清晰
- 了解 axios 函数内部运作机制
- 能解决回调函数地狱问题
回调地狱：回调函数中嵌套回调函数——代码可读性差，不好维护
1.3. Promise语法
编辑
2. Promise - 三种状态
2.1. Promise三种状态的作用
- 了解Promise对象如何关联的处理函数，以及代码执行顺序
- 状态改变后，调用关联的处理函数
2.2. Promise三种状态的概念
- 一个Promise对象，必然处于以下几种状态之一
编辑
编辑
resolve() => 'fulfilled状态-已兑现' => then()
reject() => 'rejected状态-已拒绝' => catch()
2.3. 注意
- Promise对象一旦被兑现/拒绝 就是已敲定了，状态无法再被改变
3. 练习——使用Promise + XHR 获取省份列表
- 需求：使用 Promise 管理 XHR 获取省份列表，并展示到页面上
- 步骤：
编辑
编辑
<!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. 关联成功或失败函数，做后续处理
*/
// 1. 创建Promise对象
const p = new Promise((resolve, reject) => {
// 2. 执行XHR异步代码，获取省份列表
const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://hmajax.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()
})
// 3. 关联成功或失败函数，做后续处理
p.then(result => {
console.log(result)
document.querySelector('.my-p').innerHTML = result.list.join('<br>')
}).catch(error => {
// 错误对象要用console.dir详细打印
console.dir(error)
// 服务器返回错误提示消息，插入到p标签显示
document.querySelector('.my-p').innerHTML = error.message
})
</script>
</body>
</html>
