1. 程式人生 > 實用技巧 >12.20 await 操作符的學習(await後跟非promsie、promsie(成功/失敗)的幾種情況測試)

12.20 await 操作符的學習(await後跟非promsie、promsie(成功/失敗)的幾種情況測試)

  • await 表示式會暫停當前 async function 的執行,等待 Promise 處理完成。若 Promise 正常處理(fulfilled),其回撥的resolve函式引數作為 await 表示式的值,繼續執行 async function。
function fn1(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function fn2() {
  var x = await fn1(10);
  console.log(x); // 10  x成功獲得結果以後再執行console.log(x)語句;
}
fn2();
  • 若 Promise 處理異常(rejected),await 表示式會把 Promise 的異常原因丟擲。(使用try catch處理異常)
    //await只能得到成功的結果,await右邊失敗的promsie必須使用try、catch

    //1.未使用try catch處理失敗的promsie
    async function f3() {
      var z = await Promise.reject(30);
      //停止執行
      console.log(z);
    }
    f3();

    //2.使用try catch處理失敗的promsie
    async function f4() {
      try {
        var z = await Promise.reject(30);
      } catch (z) {
        console.log(z); // 40
      }
    }
    f4();
  • 另外,如果 await 操作符後的表示式的值不是一個 Promise,則返回該值本身。
async function f2() {
  var y = await 20;
  console.log(y); // 20
}
f2();