async await 和promise then 實現異步代碼同步執行的 一些區別和注意事項

async await 同步 異步代碼

async change(id,num){
         let res=await pAjax({
             url:"./api/updataCar.php",
             data:{
                 goods_id:id,
                 goods_num:num,
                 username:this.user
             }
         })
        //pAjax()是一個返回值為promise對象的ajax請求
        // 但此時用了await關鍵字 等待 所以res的值不是promise對象，而是pAjax()返回的promise對象 由peddling狀態 變為執行成果或失敗 的值 
        //可以簡單理解為 await promise 對象后 res的值為 promise對象resolve()傳遞的值
         //console.log(res);
         await res=JSON.parse(res)
         if(res.code){
             this.data.forEach(items => {
                 return items.goods_num=(items.goods_id==id)?num:items.goods_num
             });
        }
        localStorage.setItem("data",JSON.stringify(this.data))
        this.render()
   
        })

promise then 實現同步 異步代碼

    async change(id,num){
         let res= pAjax({
            url:"./api/updataCar.php",
            data:{
                goods_id:id,
                goods_num:num,
                username:this.user,
                times:new Date().getTime()
            }
        })
        console.log(res);
        //此事輸出的res 是一個promise對象 狀態為pedding 執行中
        res.then(val=>{
            console.log(val);
            // console.log(res);
            val=JSON.parse(val)
            if(val.code){
                this.data.forEach(items => {
                    return items.goods_num=(items.goods_id==id)?num:items.goods_num
                });
            }
            localStorage.setItem("data",JSON.stringify(this.data))
            this.render()
        })

總結：兩種方式 代碼結構上 相差無幾 只不過是res作為中間變量的值不同，一個是 ajax向后端請求返回的值，一個是攜帶了ajax向后端請求返回的值的promise對象