Chaper 09 深入理解Promise

news2024/11/15 17:52:17

文章目录

前言
一、异步编程
二、Promise

前言

在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>