技術標籤：javascript

js 中非同步函式之所以特別，一個重要的原因就是它執行完成的時間、耗費的時間靠人的主觀是不得而知的。所以不能靠設定定時函式來讓上一個程式完成之後來進行下一個函式。

接上次的部落格：https://blog.csdn.net/qq_33286757/article/details/111302329

所以 promise 就突出了它的作用，目前程式執行在那個階段 結果是什麼 promise 知道。新建一個 promise 物件。

new Promise(function (resolve, reject) {
    // 要做的事情...
});

嘗試一個 ajix 請求

<script>
    var goodsInfo = {};
    $(document).ready(function(){
    //    使用Promise
    new Promise(function (resolve,reject) {
            $.ajax({url:"https://api-hmugo- web.itheima.net/api/public/v1/home/catitems",success:function(result){
                    goodsInfo = result;
                    resolve(goodsInfo);
                    console.log(goodsInfo);
                }});
        }).then(function () {
            console.log(goodsInfo);
        })
        console.log(1);
        console.log(goodsInfo);
    });
</script>
 

看是不是在 .then() 中得到了經過ajax請賦值後的全域性變數 goodsInfo 的值，如果再有什麼對 goodsInfo 的操作，在 .then 中進行即可。ajax在專案會頻繁使用，將其封裝成一個函式會更方便

<script>

    var goodsInfo = {};
    $(document).ready(function(){

// 封裝一個 promise 函式，在promiise物件前面多加了一個return
        function promiseFun (url){
            return new Promise(function (resolve,reject) {
                $.ajax({url:url,success:function(result){
                        goodsInfo = result;
                        resolve(goodsInfo);
                        console.log(goodsInfo);
                    }});
            })
        }
// 呼叫函式
        promiseFun("https://api-hmugo-web.itheima.net/api/public/v1/home/catitems").then(function () {
            console.log(goodsInfo);
        })
        console.log(1);
        console.log(goodsInfo);
    });
</script>
 

結果依然一樣。呼叫的時候是不是又簡約一點。async function 感覺是又進了非同步

// 定義規則
async function asyncFunc() {
    // await 後面必須是定義過的 promise function 
    await myfunction();
    await youfunction();
    await shefunction();
    somefunction();
    xxxxxx;
    
}
asyncFunc();

<script>
    var goodsInfo = {};
    var data ={};
    $(document).ready(function(){
// 先定義一個 promise function
        function promiseFun (url){
            return new Promise(function (resolve,reject) {
                $.ajax({url:url,success:function(result){
                        goodsInfo = result;
                        resolve(goodsInfo);
                        console.log(goodsInfo);
                    }});
            })
        }
// 在定義一個 asyns function 
     async function asyncFuunc(){
// 看這裡面的程式碼執行順序是不是跟同步函式簡直一模一樣
            await promiseFun("https://api-hmugo-web.itheima.net/api/public/v1/home/catitems");
            console.log(goodsInfo);
            data=goodsInfo;
            console.log(data)
            console.log(2);
     }
// 呼叫 asyns 函式
        asyncFuunc();
        console.log(1);
        console.log(goodsInfo);
    });
</script>