在 JavaScript 的世界中， 所有代碼都是單執行緒執行的， 由于這個“缺陷”， 導致 JavaScript 的所有網路操作， 瀏覽器事件， 都必須是異步執行， 使用Promise可以解決這個問題，

一、Promise異步編排

1.異步編排案例

案例需求： 用戶登錄， 并展示該用戶的各科成績， 在頁面發送兩次請求：

1. 查詢用戶， 查詢成功說明可以登錄，
2. 查詢用戶成功， 查詢科目，
3. 根據科目的查詢結果， 獲取成績，

分析： 此時后臺應該提供三個介面， 一個提供用戶查詢介面， 一個提供科目介面， 一個提 供各科成績介面， 為了渲染方便， 最好回應 json 資料， 在這里就不撰寫后臺介面了， 而 是提供三個 json 檔案， 直接提供 json 資料， 模擬后臺介面：

	user.json：
	{
	"id": 1,
	"name": "zhangsan",
	"password": "123456"
	}
	 
	user_corse_1.json:
	{
	"id": 10,
	"name": "chinese"
	} 
	
	corse_score_10.json:
	{
	"id": 100,
	"score": 90
	}

不使用ES6實作：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
...

    <script>
        $.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);
            }
        });
    </script>

使用ES6實作：

   <script>
        // 1.使用Promise封裝異步操作
        let p = new Promise((resolve, reject) => {
            // 2. 異步操作
            $.ajax({
                url: "mock/user.json",
                success: function (data) {
                    console.log("查詢用戶成功:", data)
                    resolve(data)
                },
                error: function (err) {
                    reject(err);
                }
            });
        });

        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) {

                }
            });
        })

    </script>

2.使用Promise優化

將Promise封裝，

• 用Promise封裝異步操作，
• 用resolve將成功操作向下傳遞，
• 用reject將失敗操作向下傳遞，

   <script>
      // 將Promise封裝
        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)
            });

    </script>

二、模塊化

模塊化是撰寫大型專案的基礎，類似于Java中的導包，JS中沒有導包的概念，取而代之的是模塊化，

• export命令：用于規定模塊的對外介面，
• import命令：用于匯入其他模塊提供的功能，

準備三個JS檔案，演示模塊化的匯入匯出：

hello.js

export const util = {
    sum(a, b) {
        return a + b;
    }
}

// export不僅可以到處物件,一切JS變數都可以匯出.比如基本型別變數,函式,陣列,物件.
// export{util}

main.js

import util from "./hello.js"
import {name,age,add} from "./user.js"


util.sum(1,2);
console.log(name+age);
add(1,3);

user.js

var name = "jack";
var age = "21";
function add(a,b){
    return a + b;
}

export{name,age,add}