ES6特性-异步对象Promise-CFANZ编程社区

章节目录：

一、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>