JS动画实现回调地狱promise的实例代码详解

什么是回调地狱

回调地狱指的是在嵌套的JavaScript回调函数中编写代码的情况。这种情况往往伴随着深度嵌套和复杂的控制流程，容易让代码难以理解和维护。

下面是一个典型的回调地狱示例：

function getData(callback1) {
  ajaxFunction(function(response1) {
    var id = JSON.parse(response1).id;
    ajaxFunction('user/' + id, function(response2) {
      callback1(response2);
    });
  });
}

getData(function(userJson) {
  var user = JSON.parse(userJson);
  ajaxFunction(user.recentPosts, function(postsJson) {
    var posts = JSON.parse(postsJson);
    render(posts);
  });
});

解决方案：Promise

Promise是一种常见的JavaScript编程技术，用于解决回调地狱的问题。一个Promise可以看作是程序执行异步任务的容器，它可以用来代替回调函数，并处理异步任务的状态和结果。

一个Promise可有以下三种状态：
- Pending：表示异步任务还没有完成
- Fulfilled：表示异步任务已经完成，并返回了结果
- Rejected：表示异步任务已经完成，但发生了错误

Promise的核心方法是then()，它可以接受两个回调函数onFulfilled和onRejected。当异步任务完成并返回结果时，会调用onFulfilled函数；当异步任务发生错误时，会调用onRejected函数。

下面是使用Promise重写上述示例代码的方式：

function getDataPromise() {
  return new Promise(function(resolve, reject) {
    ajaxFunction(function(response) {
      resolve(JSON.parse(response).id);
    });
  }).then(function(id) {
    return new Promise(function(resolve, reject) {
      ajaxFunction('user/' + id, function(response) {
        resolve(response);
      });
    });
  }).then(function(userJson) {
    var user = JSON.parse(userJson);
    return new Promise(function(resolve, reject) {
      ajaxFunction(user.recentPosts, function(response) {
        resolve(response);
      });
    });
  });
}

getDataPromise().then(function(postsJson) {
  var posts = JSON.parse(postsJson);
  render(posts);
});

示例说明

示例一

使用Promise获取图片的宽高，并在获取完成后将图片展示出来。

<body>
    <div id="image-container"></div>
    <script>
        function loadImage(url) {
            return new Promise(function(resolve, reject) {
                var image = new Image();
                image.onload = function() {
                    resolve(image);
                };
                image.onerror = function() {
                    reject("图片加载失败！");
                };
                image.src = url;
            });
        }

        loadImage("https://picsum.photos/200/300")
            .then(function(image) {
                var container = document.querySelector("#image-container");
                container.appendChild(image);
                console.log("图片宽度：" + image.width);
                console.log("图片高度：" + image.height);
            })
            .catch(function(error) {
                console.error(error);
            });
    </script>
</body>

示例二

使用Promise顺序请求多个API，并在请求完成后对结果进行处理。

<body>
    <ul id="post-list"></ul>
    <script>
        function getPosts() {
            return new Promise(function(resolve, reject) {
                ajaxFunction("https://jsonplaceholder.typicode.com/posts", function(response) {
                    resolve(JSON.parse(response));
                });
            });
        }

        function getUsers() {
            return new Promise(function(resolve, reject) {
                ajaxFunction("https://jsonplaceholder.typicode.com/users", function(response) {
                    resolve(JSON.parse(response));
                });
            });
        }

        Promise.all([getPosts(), getUsers()])
            .then(function(results) {
                var posts = results[0];
                var users = results[1];

                var postList = document.querySelector("#post-list");
                for (var i = 0; i < posts.length; i++) {
                    var post = posts[i];
                    var user = users.find(function(user) {
                        return user.id === post.userId;
                    });

                    var listItem = document.createElement("li");
                    var titleElement = document.createElement("h3");
                    var bodyElement = document.createElement("p");
                    var authorElement = document.createElement("p");

                    titleElement.innerText = post.title;
                    bodyElement.innerText = post.body;
                    authorElement.innerText = "作者：" + user.name;

                    listItem.appendChild(titleElement);
                    listItem.appendChild(bodyElement);
                    listItem.appendChild(authorElement);
                    postList.appendChild(listItem);
                }
            })
            .catch(function(error) {
                console.error(error);
            });
    </script>
</body>

以上两个示例旨在说明Promise的基本用法和如何解决回调地狱的问题。在实际开发中，可以根据具体业务需求和技术要求更加深入地使用Promise。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS动画实现回调地狱promise的实例代码详解 - Python技术站