1. 程式人生 > 實用技巧 >12-ES6之async 函式

12-ES6之async 函式

async

async 是 ES7 才有的與非同步操作有關的關鍵字,和 Promise , Generator 有很大關聯的。

語法

async function name([param[, param[, ... param]]]) { statements }
  • name: 函式名稱。
  • param: 要傳遞給函式的引數的名稱。
  • statements: 函式體語句。

返回值

async 函式返回一個 Promise 物件,可以使用 then 方法添加回調函式。

async 函式中可能會有 await 表示式,async 函式執行時,如果遇到 await 就會先暫停執行 ,等到觸發的非同步操作完成後,恢復 async 函式的執行並返回解析值。

await 關鍵字僅在 async function 中有效。如果在 async function 函式體外使用 await ,你只會得到一個語法錯誤。

await

await 操作符用於等待一個 Promise 物件, 它只能在非同步函式 async function 內部使用。

語法

[return_value] = await expression;
  • expression: 一個Promise物件或者任何要等待的值。

返回值

返回 Promise 物件的處理結果。如果等待的不是 Promise 物件,則返回該值本身。

如果一個 Promise 被傳遞給一個 await 操作符,await 將等待 Promise 正常處理完成並返回其處理結果。

await針對所跟不同表示式的處理方式:

  • Promise 物件:await 會暫停執行,等待Promise 物件 resolve,然後恢復 async 函式的執行並返回解析值。
  • 非 Promise 物件:直接返回對應的值。
 <script>
        //promise承諾
        //相當於一個容器,儲存著未來才會的結果事件(非同步操作)的一個過程
        //各種非同步都可以用同樣方法進行處理axios

        //兩個特點:物件的狀態不受外接影響,處理非同步操作,三個狀態:Pending(進行),resolved(成功),rejected(失敗)
        //一旦狀態改變,不會再變,任務時候都可以得到這個結果
        //接受兩個回撥函式
        let pro=new Promise(function(resolved,rejected){
            //執行非同步操作
            let res={
                code:201,
                data:{
                    name:"111"
                },
                error:"222"
            };
            setTimeout(()=>{
                if (res.code===200){
                    resolved(res.data)
                    }else{
                    rejected(res.error)
                    }
                    
            },1000)
        });
        pro.then((val)=>{
            console.log(val);
        }).catch((val)=>{
            console.log(val);
        })

        //all方法的應用
        let p1 =new Promise((resolved,rejected)=>{})
        let p2 =new Promise((resolved,rejected)=>{})
        let p3 =new Promise((resolved,rejected)=>{})
        let p4=Promise.all([p1,p2,p3])
        //上面3個都執行成功才執行
        p4.then(()=>{

        })
        //race()方法,某個非同步請求設定超時時間
    </script>