如果要做3件事，A做完了，根據A的資料做B，B做完了根據B的資料做C

傳統的ajax請求會迴圈巢狀（地獄回撥）。可以利用Promise封裝ajax解決這一情況

Promise語法本質

    new Promise((fun1, fun2) => {
         fun1(111)
        // fun2(222)
    }).then((data) => { //獲取fun1的引數
        console.log(data);
    }).catch((data) => { //獲取fun2的引數
        console.log(data);
    });
 

Promise中傳入一個函式，這個函式有兩個函式引數，大家都叫resolve和reject，我之前學的時候發現容易迷糊，換種命名用fun1替代resolve，fun2替代reject
　　第一個引數fun1,可向.then傳遞引數，第二個引數fun2可向reject傳遞引數
看明白上述本質之後，對於開篇場景，可進一步將Promise封裝成函式

    function get1(data) { //自己定義一個方法整合一下
        return new Promise((resolve, reject) => {
            if(data){
                resolve(data
 
+data)
            }else{
                reject('沒有引數')
            }
        });
    }
    get1('A').then((data)=>{
        console.log(data,'~~~')
        return get1(data);
    }).then((data)=>{
        console.log(data,'!!!')
        return get1();
    }).then((data)=>{
        console.log(data,
 
'<<<')
        return get1();
    }).catch((data)=>{
        console.log(data,'???')
    });

輸出：

AA ~~~
html.html:16 AAAA !!!
html.html:22 沒有引數 ???

這個明白之後，視訊中的示例更簡單了，直接貼程式碼

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    // function get1(data) { //自己定義一個方法整合一下
    //     return new Promise((resolve, reject) => {
    //         if(data){
    //             resolve(data+data)
    //         }else{
    //             reject('沒有引數')
    //         }
    //     });
    // }
    // get1('A').then((data)=>{
    //     console.log(data,'~~~')
    //     return get1(data);
    // }).then((data)=>{
    //     console.log(data,'!!!')
    //     return get1();
    // }).then((data)=>{
    //     console.log(data,'<<<')
    //     return get1();
    // }).catch((data)=>{
    //     console.log(data,'???')
    // });
    function get(url, data) { //自己定義一個方法整合一下
        return new Promise((agr1, arg2) => {
            $.ajax({
                url: url,
                data: data,
                success: function(data) {
                    agr1(data);
                },
                error: function(err) {
                    arg2(err)
                }
            })
        });
    }
    get("mock/user.json")
        .then((data) => {
            console.log("使用者查詢成功~~~:", data)
            return get(`mock/user_course_1.json`);
        })
        .then((data) => {
            console.log("課程查詢成功~~~:", data)
            return get(`mock/corse_score_${data.id}.json`);
        })
        .then((data) => {
            console.log("課程成績查詢成功~~~-----------:", data)
        })
        .catch((err) => { //失敗的話catch
            console.log("出現異常", err)
        });
</script>

輸出：

使用者查詢成功~~~: {id: 1, name: "zhangsan", password: "123456"}
html.html:44 課程查詢成功~~~: {id: 10, name: "chinese"}
html.html:48 課程成績查詢成功~~~-----------: {id: 100, score: 90}

專案目錄結構：

user_course_1.json

{
    "id": 10,
    "name": "chinese"
}

user.json

{
    "id": 1,
    "name": "zhangsan",
    "password": "123456"
}

corse_score_10.json

{
    "id": 100,
    "score": 90
}