ES6特性-异步对象Promise

最新推荐文章于 2023-07-14 16:45:11 发布

饺子泡牛奶

最新推荐文章于 2023-07-14 16:45:11 发布

阅读量237

点赞数

分类专栏：前端基础文章标签： javascript es6 前端

本文链接：https://blog.csdn.net/weixin_48776531/article/details/124207626

版权

前端基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

章节目录：

一、Promise基本概念

ECMAscript 6 原生提供了 Promise 对象。

Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。

异步对象的三种状态：

pending: 初始状态，不是成功或失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。

此处我们有一个诉求：

通过查询提供的文件，来模拟处理请求。
完整的流程是：查询用户的信息拿到id -> 通过id查询用户的课程 -> 再通过课程id查询分数。
在过去，异步执行可以用回调函数实现。一旦有一连串的 ajax 请求 a,b,c,d… 后面的请求依赖前面的请求结果，就需要层层嵌套。这种缩进和层层嵌套的方式，非常容易造成上下文代码混乱，我们不得不非常小心翼翼处理内层函数与外层函数的数据，一旦内层函数使用了上层函数的变量，这种混乱程度就会加剧…
解决方案：此处使用Promise进行实现。

二、Promise使用

2.1 示例文件


user.json： 
{ 
  "id": 1, "name": "zhangsan", "password": "123456" 
}

user_corse_1.json: 
{ 
  "id": 10, "name": "chinese" 
}

corse_score_10.json:
{ 
  "id": 100, "score": 90 
}

2.2 句式


        const Promiser = new Promise((resolve, reject) => {
            // 执行异步操作 
            if (/* 异步操作成功 */) {
                resolve(value);
                // 调用 resolve，代表 Promise 将返回成功的结果 
            } else {
                reject(error);
                // 调用 reject，代表 Promise 会返回失败结果 
            }
        });

2.3 代码示例

引入jquery


<!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>Es6-Promise</title>

    <!-- 导入jquery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</head>

封装调用


<body>

    <script>

        /* 
        1. 封装一个通用的get()方法。
        2. 当异步代码执行成功时，我们才会调用resolve(...)。
        3. 当异步代码失败时就会调用reject(...)。
        */

        function get(url, data) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: url,
                    data: data,
                    type: "GET",

                    success(result) {
                        resolve(result);
                    },
                    error(error) {
                        reject(error);
                    }
                });
            });
        }




        /* 
        1. 调用get()方法，执行异步请求。
        2. then()方法：链式操作。
        3. catch()方法：捕捉错误。
        */

        get("mock/user.json").then((result) => {

            console.log(" 查询到用户信息: ", result);
            // id: 1 name: "zhangsan" password: "123456"

            return get(`mock/user_corse_${result.id}.json`);
            // 通过得到结果的id进行链式查询。

        }).then((result) => {

            console.log(" 查询到课程信息: ", result);
            // id: 10 name: "chinese"
            return get(`mock/corse_score_${result.id}.json`);

        }).then((result) => {

            console.log(" 查询到分数信息: ", result);
            // id: 100 score: 90

        }).catch((error) => {

            console.log(" 异常捕获: ", error);

        });

    </script>

</body>

三、Promise总结

优点：

有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。

缺点：

首先，无法取消 Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。第三，当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

四、结束语

“-------怕什么真理无穷,进一寸有一寸的欢喜。”

微信公众号搜索：饺子泡牛奶。

饺子泡牛奶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6特性-异步对象Promise

章节目录：一、Promise基本概念二、Promise使用2.1 示例文件2.2 句式2.3 代码示例三、Promise总结四、结束语一、Promise基本概念ECMAscript 6 原生提供了 Promise 对象。Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。异步对象的三种状态：pending: 初始状态，不是成功或失败状态。fulfilled: 意味着操作成功完成。rejected: 意味着操作失败。此处我们有一个诉求：通过查询提供的文件，来模拟处理
复制链接

扫一扫