欢迎大家订阅【Vue2+Vue3】入门到实践 专栏，开启你的 Vue 学习之旅！
文章目录
前言
在JavaScript中，异步编程是一个重要的概念。随着应用程序的复杂性增加，处理异步操作的方式也变得更加复杂。Promise是一种用于处理异步操作的对象，它提供了一种更清晰和更强大的方式来管理异步代码。本章详细讲解了Promise的基本用法以及链式调用。
一、异步编程
①定义
异步编程是一种编程范式，它允许程序在执行某些操作时不阻塞主线程，从而提高应用程序的效率和响应性。在异步编程中，程序可以在等待某些操作（如网络请求、文件读取或数据库查询）完成的同时继续执行其他任务。
②关键概念
- 非阻塞：在异步编程中，程序不会等待某个操作完成后再继续执行，而是可以同时处理多个操作。即使某个操作需要较长时间，程序仍然可以响应用户输入或执行其他任务。
- 回调函数：传统的异步编程通常使用回调函数来处理异步操作的结果。当异步操作完成时，回调函数会被调用。这种方式可能导致“回调地狱”，使代码难以阅读和维护。
- Promise：Promise是JavaScript中处理异步操作的一种方式。它表示一个可能在未来某个时间点完成的操作，并提供了
then和catch方法来处理成功和失败的结果。 - async/await：
async和await是ES2017引入的语法糖，使得异步代码看起来更像同步代码。使用async关键字定义一个异步函数，并在函数内部使用await来等待Promise的结果。
【示例】
以下是一个简单的异步编程示例，使用setTimeout模拟异步操作：
console.log("开始");
setTimeout(() => {
console.log("异步操作完成");
}, 2000);
console.log("结束");
运行结果：
开始
结束
异步操作完成
【分析】
setTimeout 函数设置了一个异步操作，该操作会在2秒后执行，输出“异步操作完成”。
二、Promise
①基本概念
Promise是一个表示异步操作最终完成（或失败）及其结果值的对象。Promise有以下三种状态：
- Pending（待定）: 初始状态，既不是成功，也不是失败。
- Fulfilled（已兑现）: 操作成功完成。
- Rejected（已拒绝）: 操作失败。
一旦Promise的状态从Pending变为Fulfilled或Rejected，就不能再改变。
②基本用法
const myPromise = new Promise((resolve, reject) => {
const success = true; // 模拟成功或失败
if (success) {
resolve("操作成功！");
} else {
reject("操作失败！");
}
});
myPromise
.then(result => {
console.log(result); // 输出: 操作成功！
})
.catch(error => {
console.error(error); // 输出: 操作失败！
});
new Promise(...)：Promise构造函数，用于创建一个新的Promise对象。该构造函数接受一个执行器函数作为参数。(resolve, reject) => { ... }：执行器函数，是一个回调函数，在Promise创建时立即执行，它包含了异步操作的逻辑。- 参数
resolve: 一个函数，用于将Promise的状态从“待定”（Pending）变为“已兑现”（Fulfilled）。当异步操作成功完成时调用它，并传递结果值。 - 参数
reject: 一个函数，用于将Promise的状态从“待定”（Pending）变为“已拒绝”（Rejected）。当异步操作失败时调用它，并传递错误信息。
- 参数
const success = true;：定义了一个变量success，用于模拟异步操作的结果。resolve("操作成功！");：成功回调。当success为true时，调用resolve函数并传递字符串“操作成功！”作为结果。此时，Promise的状态变为“已兑现”，并将结果传递给后续的then方法进行处理。reject("操作失败！");：失败回调。当success为false时，调用reject函数并传递字符串“操作失败！”作为错误信息。此时，Promise的状态变为“已拒绝”，并将错误信息传递给后续的catch方法进行处理。myPromise.then(...)：处理成功结果。then方法用于处理Promise成功兑现后的结果。它接受一个回调函数作为参数，该函数将在Promise成功时被调用，并接收resolve传递的结果。.catch(...)：处理失败结果。catch方法用于处理Promise被拒绝后的错误。它接受一个回调函数作为参数，该函数将在Promise失败时被调用，并接收reject传递的错误信息。
【示例】
<!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管理异步任务 */
// 1.创建Promise对象
const myPromise=new Promise((resolve,reject)=>{
// 2.执行异步代码
setTimeout(()=>{
resolve('模拟AJAX请求——成功结果')
},2000)
})
// 3.获取结果
myPromise.then(result=>{
console.log(result)
}).catch(err=>{
console.log(error)
})
</script>
</body>
</html>
运行结果：
异步代码修改为如下：
setTimeout(()=>{
reject(new Error('模拟AJAX请求——失败结果'))
},2000)
运行结果：
③链式调用
定义：
Promise允许开发者处理异步操作，并通过then()方法返回一个新的Promise，从而实现链式调用。每个then()方法可以接收前一个Promise的结果，并返回一个新的Promise，继续进行后续的操作。
优点：
- 清晰性：代码没有深层嵌套而是通过链式调用串联在一起，避免了深层嵌套，代码逻辑更清晰。
- 异步处理：通过链式调用，
Promise的每一部分都是独立的，可以轻松处理多个异步操作。 - 错误处理：如果在任意一个
then中抛出错误，整个链的后续部分都可以通过catch()方法捕获和处理，避免了传统回调的错误传递问题。
【注意】
then()回调函数中的返回值，会影响新生成的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的链式调用
需求：把省市的嵌套结构改成链式调用的学校结果
*/
// 1.创建Promise对象——模拟请求省份名字
const p=new Promise((resolve,reject)=>{
// 2.执行异步代码
setTimeout(()=>{
resolve('北京市')
},2000)
})
// 3.获取省份名字
const p2=p.then(result=>{
console.log(result)
// 4.创建Promise对象——模拟请求城市名字
// return Promise对象最终状态和结果会影响新的Promise对象
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(result+'---北京')
},2000)
})
})
// 5.获取城市名字
p2.then(result=>{
console.log(result)
})
</script>
</body>
</html>
运行结果：
【分析】
这段代码通过链式调用的方式处理异步操作。首先，通过Promise获取省份，然后在获取成功后继续获取城市，保持代码结构清晰可读且不容易出现回调地狱的情况。