Promise從兩眼發懵到雙眼放光(9)-async和await

async函數

async的MDN文檔

1. async函數的返回值爲promise對象
2. async函數返回的promise的結果由函數執行的結果決定

async function fn1() {
    return 1
}
console.log(fn1())的輸出結果爲Promise類型

async function fn1() {
    return 1  //成功的value爲1的promise
    throw 2   //失敗的reason爲2的promise
    return Promise.reject(3) //失敗的reason爲3的promise
    return Promise.resolve(3)  //成功的reason爲3的promise
    return new Promise((resolve, reject) => {
        resolve(4)  //成功的value爲4的promise
        reject(4)   //失敗的reason爲4的promise
    }) 
  }

await表達式

await的MDN文檔

1. await右側的表達式通常爲promise對象, 但也能夠是其它的值
2. 若是表達式是promise對象, await返回的是promise成功的值
3. 若是表達式是其它值, 直接將此值做爲await的返回值
4. 若是await的promise失敗了, 就會拋出異常, 須要經過try...catch來捕獲處理
5. await必須寫在async函數中, 但async函數中能夠沒有await

function fn2() {  
  return new Promise((resolve, reject) => {  
    resolve(1)  
  })  
}  
  
function fn3() {  
  return 3  
}  
  
function fn4() {  
  return new Promise((resolve, reject) => {  
    reject(2)  
  })  
}  
  
 //函數體內有await,函數聲明是必須有async,可是async函數內沒必要須有await
(async function(){  
  const r1 = await fn2()  
  console.log(r1)  //輸出結果爲1,並不表明fn2的返回值是1,而是說fn2()返回一個成功的value爲1的promise,await的返回值是promise的成功的value
  
  const r2 = await fn3()  
  console.log(r2)  //輸出結果爲3,await右側的表達式是非promise,直接此值返回
  
  const r3 = await fn4()  
  console.log(r3)  //uncaught異常,若是await右側返回是一個失敗的promise,則須要使用try...catch來捕獲異常
  try {  
    await fn4()  
  } catch(error) {  
    console.log(error)  //輸出結果爲2
  }
})()