技術標籤：筆記前端ES6vuejs

promise用於優化非同步請求

測試業務需求

1、查詢使用者，查詢成功說明可以登入
2、查詢使用者成功，查詢科目
3、按照科目的查詢結果，獲取成績

1、原有的ajax 巢狀呼叫的程式碼

 $.ajax({
            url: "mock/user.json",
            success(data) {
                console.log("查詢使用者：", data);
                $.ajax({
                    url:
 
 `mock/user_corse_${data.id}.json`,
                    success(data) {
                        console.log("查詢到課程：", data);
                        $.ajax({
                            url: `mock/corse_score_${data.id}.json`,
                            success(data) {
                                console.
 
log("查詢到分數：", data);
                            },
                            error(error) {
                                console.log("出現異常了：" + error);
                            }
                        });
                    },
                    error(error) {
                        console.
 
log("出現異常了：" + error);
                    }
                });
            },
            error(error) {
                console.log("出現異常了：" + error);
            }
        });

傳送請求

請求結果

2、Promise可以封裝非同步操作

使用Promise的程式碼,使請求順序性邏輯性更強

let p = new Promise((resolve, reject) => {
            //1、非同步操作
            $.ajax({
                url: "mock/user.json",
                success: function (data) {
                    console.log("查詢使用者成功:", data)
                    //返回成功資料，並回調then
                    //請求成功後的操作, 不需要巢狀查詢 
                    resolve(data);
                },
                error: function (err) {
                    //拒絕，返回失敗資訊
                    reject(err);
                }
            });
        });
		// p.then 用於執行Promise請求成功後的操作 即 resolve(data) 方法  obj為上一步的結果資料
        p.then((obj) => {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: `mock/user_corse_${obj.id}.json`,
                    success: function (data) {
                        console.log("查詢使用者課程成功:", data)
                        resolve(data);
                    },
                    error: function (err) {
                        reject(err)
                    }
                });
            })
        })
		前面的成功後才執行
        .then((data) => {
            console.log("上一步的結果", data)
            $.ajax({
                url: `mock/corse_score_${data.id}.json`,
                success: function (data) {
                    console.log("查詢課程得分成功:", data)
                },
                error: function (err) {
                }
            });
        })

3、優化處理，鏈式呼叫, 簡潔的寫法

用Promise封裝一個傳送請求的方法, 並且可以鏈式呼叫

 //該方法 url請求路徑, data 請求引數
        function get(url, data) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: url,
                    data: data,
                    success: function (data) {
                        resolve(data);
                    },
                    error: function (err) {
                        reject(err)
                    }
                })
            });
        }

        //第一步, 直接查詢使用者資訊 
        get("mock/user.json")
            .then((data) => {
                console.log("使用者查詢成功~~~:", data)

                //第二步, 查詢課程
                return get(`mock/user_corse_${data.id}.json`);
            })
            .then((data) => {
                console.log("課程查詢成功~~~:", data)

                  //第三步, 查詢成績
                return get(`mock/corse_score_${data.id}.json`);
            })
            .then((data)=>{
                console.log("課程成績查詢成功~~~:", data)
            })
            .catch((err)=>{
                console.log("出現異常",err)
            });