Promise_链式调用（解决回调函数地狱）

介绍

代码结构

代码

index.html（HTML部分）

运行结果

代码分析

总结

介绍

本示例展示了如何使用JavaScript中的Promise对象解决传统回调函数嵌套（即“回调地狱”）的问题。通过链式调用的方式，使得多个异步操作变得更加线性和易于维护。代码演示了如何利用Promise按顺序获取省、市、区的信息，并将它们依次拼接成完整的地址。

代码结构

HTML部分：HTML代码主要提供一个简单的框架，包含了<script>标签来加载JavaScript代码。
JavaScript部分：核心逻辑部分，使用了Promise对象来模拟获取省、市、区信息的异步操作，且每个异步请求的结果会被传递到下一个then方法中，实现链式调用。

通过setTimeout模拟异步操作（如数据请求），每个异步操作都会返回一个新的Promise对象，链式调用的方式保证了异步操作的顺序执行。

代码

以下是完整的HTML和JavaScript代码，用户可以直接复制到自己的项目中使用。

index.html（HTML部分）

<!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><body><script>/*** 目标：掌握Promise的链式调用* 需求：把省市的嵌套结构，改成链式调用的线性结构*/const p = new Promise((resolve, reject) => {setTimeout(() => {resolve('广东省') // 3秒后返回省份名称}, 3000)})const p2 = p.then(result => {console.log(result);// 返回一个新的Promise对象，继续获取市级信息return new Promise((resolve, reject) => {setTimeout(() => {resolve(result + ',广州市') // 2秒后返回市名}, 2000)})})const p3 = p2.then(result => {console.log(result);// 返回一个新的Promise对象，继续获取区级信息return new Promise((resolve, reject) => {setTimeout(() => {resolve(result + ',天河区') // 2秒后返回区名}, 2000);})})p3.then(result => {console.log(result); // 最终结果，打印出完整地址})</script>
</body></html>

运行结果

等待时间：
- 第一个异步操作（获取省份）大约需要3秒钟。
- 第二个异步操作（获取城市）大约需要2秒钟。
- 第三个异步操作（获取地区）大约需要2秒钟。
控制台输出：
- 3秒后，首先打印出：广东省
- 紧接着2秒后，打印出：广东省,广州市
- 再过2秒后，打印出：广东省,广州市,天河区
- 最终结果是完整的地址：广东省,广州市,天河区

代码分析

创建Promise：首先，我们创建了一个Promise对象p，该对象在3秒后返回“广东省”。
链式调用：通过then方法，我们可以将获取到的“广东省”传递给下一个异步操作，该操作获取城市信息，返回“广州市”。
返回新Promise：每个then方法返回一个新的Promise对象，这保证了异步操作的顺序性。通过多次链式调用，可以确保在上一个异步操作完成后，才会执行下一个操作。
避免回调地狱：这种链式调用方式相比传统的回调函数嵌套（回调地狱），使代码结构更加清晰易懂，也减少了嵌套层次，避免了回调函数嵌套过深导致的可读性差的问题。