使用Promise解决异步编程中的回调地狱问题

时间：02-07来源：作者：点击数：20

前言

传统的回调函数方式处理异步操作容易导致代码嵌套过深，形成所谓的“回调地狱”，使得代码难以阅读和维护。

为了解决这个问题，ES6引入了Promise对象。Promise提供了一种更清晰、更结构化的方式来处理异步操作，并且可以避免回调地狱的问题。本文将通过几个具体的代码示例，详细介绍如何使用Promise来简化异步编程，并附有详细的代码解析。

1. 理解Promise的基本概念

代码片段

<!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>Document</title>
</head>
<body>
    <script>
        /*
            Promise : 构造函数

            resolve : 当异步程序成功后，调用的回调函数  （成功状态）
            reject: 当异步程序失败后，调用 的回调函数  （失败状态）

            new Promise((resolve,reject) => {
                if(处理异步程序){
                    resolve([参数]);
                }else{
                    reject([参数]);
                }
            })

            Promise的原型方法：
            1. then(() => {}) : 当promise对象返回resolve状态时，可以调用 then方法执行后续语句
            2. catch(() => {}) : 当promise对象返回reject状态时，可以调用catch方法执行后续语句
        */
        // 创建一个简单的Promise
        let promise = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('成功');
            }, 1000);
        });

        // 处理Promise的结果
        promise.then((result) => {
            console.log(result); // 输出：成功
        }).catch((error) => {
            console.error(error);
        });
    </script>
</body>
</html>

代码解析

这段代码展示了Promise的基本用法：

创建Promise：通过new Promise()构造函数创建一个新的Promise对象。构造函数接收一个执行器函数作为参数，该函数有两个参数：resolve和reject。
异步操作：在执行器函数内部，我们模拟了一个耗时1秒的操作（使用setTimeout），并在操作完成后调用resolve方法，表示操作成功。
处理结果：使用.then()方法处理Promise的成功结果，使用.catch()方法处理可能的错误。

2. 按顺序执行多个异步任务

代码片段

<!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>Document</title>
</head>
<body>
    <script>
        /*
            如何让异步程序按顺序执行？
            3秒后输出1，再过2秒输出2，再1秒输出3，再过半秒输出4
        */
        new Promise((resolve, reject) => {
            setTimeout(() => {
                alert(1);
                resolve();
            }, 3000);
        })
        .then(() => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    alert(2);
                    resolve();
                }, 2000);
            });
        })
        .then(() => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    alert(3);
                    resolve();
                }, 1000);
            });
        })
        .then(() => {
            setTimeout(() => {
                alert(4);
            }, 500);
        })
        .catch(() => {
            alert('失败');
        });
    </script>
</body>
</html>

代码解析

这段代码展示了如何使用Promise链式调用来按顺序执行多个异步任务：

创建第一个Promise：设置一个3秒的延迟，然后弹出数字1，并通过resolve()将控制权传递给下一个then。
链式调用then：每个then都返回一个新的Promise，依次设置不同的延迟时间并弹出相应的数字。
处理错误：如果任何一个Promise被拒绝（调用reject），则会跳转到catch块中处理错误。

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>Document</title>
</head>
<body>
    <script src="js/ajax.js"></script>
    <script>
        new Promise((resolve, reject) => {
            ajax({
                url: 'http://localhost:8888/test/first',
                success(data) {
                    resolve(data);
                }
            });
        })
        .then(data => {
            console.log('first:' + data);
            return new Promise((resolve, reject) => {
                ajax({
                    url: 'http://localhost:8888/test/second',
                    success(data) {
                        resolve(data);
                    },
                    dataType: 'json'
                });
            });
        })
        .then(data => {
            console.log('second:' + data);
            return new Promise((resolve, reject) => {
                ajax({
                    url: 'http://localhost:8888/test/third',
                    data: {
                        name: '张三',
                        age: 18
                    },
                    dataType: 'json',
                    success(data) {
                        resolve(data);
                    }
                });
            });
        })
        .then(data => {
            console.log('third:' + data);
            return new Promise((resolve, reject) => {
                ajax({
                    url: 'http://localhost:8888/test/fourth',
                    data: {
                        name: '李四',
                        age: 19
                    },
                    type: 'post',
                    dataType: 'json',
                    success(data) {
                        console.log('fourth:' + data);
                    }
                });
            });
        })
        .catch(err => {
            console.error(err);
        });
    </script>
</body>
</html>

代码解析

这段代码展示了如何使用Promise链式调用来处理具有依赖关系的异步任务：

发起第一个请求：通过ajax函数发起GET请求，获取数据并将其传递给下一个then。
链式调用then：每个then都返回一个新的Promise，用于发起后续的请求。每个请求的成功结果都会传递给下一个then。
处理错误：如果任何一个请求失败，则会跳转到catch块中处理错误。

4. 并行执行多个异步任务

代码片段

<!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>Document</title>
</head>
<body>
    <script>
        //封装一个加载图片的函数
        function loadImg(src) {
            return new Promise((resolve, reject) => {
                let img = new Image();
                img.src = src;
                img.onload = () => resolve(img);
                img.onerror = () => reject(new Error('图片加载失败'));
            });
        }

        //图片数组
        let arr_img = ['img/1.webp', 'img/2.jpg', 'img/3.jpeg'];

        //并行加载所有图片
        Promise.all(arr_img.map(src => loadImg(src)))
            .then(imgs => {
                imgs.forEach(img => document.body.appendChild(img));
            })
            .catch(err => {
                console.error(err);
            });
    </script>
</body>
</html>

代码解析

这段代码展示了如何使用Promise.all来并行执行多个异步任务：

封装加载图片的函数：loadImg函数返回一个Promise，当图片加载成功时调用resolve，失败时调用reject。
并行加载图片：使用Promise.all方法并行加载所有图片。Promise.all接收一个Promise数组作为参数，只有当所有Promise都成功时才会调用then，否则会立即调用catch。
处理结果：将加载成功的图片添加到页面中，或在失败时记录错误信息。

5. 避免回调地狱

代码片段

<!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>Document</title>
</head>
<body>
    <script>
        /*
            ES5中解决： 采用回调嵌套的方式，嵌套多了，产生回调地狱。
            ES6中解决回调地狱、异步编程的问题
        */
        // 回调地狱示例
        setTimeout(() => {
            alert(1);
            setTimeout(() => {
                alert(2);
                setTimeout(() => {
                    alert(3);
                    setTimeout(() => {
                        alert(4);
                    }, 500);
                }, 1000);
            }, 2000);
        }, 3000);

        // 使用Promise避免回调地狱
        new Promise((resolve, reject) => {
            setTimeout(() => {
                alert(1);
                resolve();
            }, 3000);
        })
        .then(() => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    alert(2);
                    resolve();
                }, 2000);
            });
        })
        .then(() => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    alert(3);
                    resolve();
                }, 1000);
            });
        })
        .then(() => {
            setTimeout(() => {
                alert(4);
            }, 500);
        })
        .catch(() => {
            alert('失败');
        });
    </script>
</body>
</html>