ES8(一) —— async&await

ES8（2017） —— async&await

• async和普通函數的區別
• await
• async和await必須配合使用

• 關於await使用中錯誤的處理

  • M1：try-catch
  • M2：.catch
  • M3：兩個返回值（參考node）
• ES6-ES10學習版圖

async和普通函數的區別

// 普通函數
function fuc() {
    return 27
}
console.log(fuc()); // 27

//async函數
async function firstAsync() {
  return 27
}

console.log(firstAsync())
// Promise {<resolved>: 27}
// 返回了一個promise對象，將27返回到resolve裏面

// 至關於 -->

async function firstAsync() {
  return Promise.resolve(27)
}

firstAsync().then(val => {
  console.log(val) // 27
})

console.log(firstAsync() instanceof Promise)
// true 能夠對async返回的對象進行判斷

await

下面函數如何能夠按照順序執行？

async function firstAsync() {
  // 聲明異步操做，執行完畢以後才能執行下面的函數
  let promise = new Promise((resolve,reject) => {
    setTimeout(() => {
      resolve('now it is done')
    }, 1000)
  })
  // 執行異步操做
  promise.then(val => {
    console.log(val)
  })
  
  console.log(2)
  return 3
}

firstAsync().then(val => {
  console.log(val)
})

//2
//3
//now it is done

使用await

async function firstAsync() {
  // 聲明異步操做，執行完畢以後才能執行下面的函數
  let promise = new Promise((resolve,reject) => {
    setTimeout(() => {
      resolve('now it is done')
    }, 1000)
  })
  // 執行異步操做
  let result = await promise
  console.log(result)
  
  console.log(2)
  return 3
}

firstAsync().then(val => {
  console.log(val)
})

//now it is done
//2
//3

await promise 是一個表達式，後面必需要跟promise對象，若是不是會自動處理成promise對象

console.log(await promise) 
//now it is done  ---有返回值
console.log(await 40) //40
console.log(await promise.resolve(40)) //40

async和await必須配合使用

不然會報錯

關於await使用中錯誤的處理

若是不對await進行錯誤處理，則會阻斷程序執行。

await使用中，若是promise對象返回resolve，則返回什麼值就是什麼值，包括undefined。

可是若是返回reject，則返回值返回undefined，從catch函數中能夠接收到。

第一種處理方法：try-catch

• 優勢：簡潔明瞭，全部報錯都到catch裏面處理，不須要對await返回值進行判斷
• 缺點：自己try-catch是處理同步報錯的問題，若是await函數以後有報錯，則沒法判斷報錯來源

// 定義一個函數，返回promise對象
function firstAsync() {
  return new Promise((resolve,reject) => {
    const a = 0;
    if(a){
      resolve(1)
    }else{
      reject(2)
    }
  })
}


async function hello () {
  // 判斷是否有報錯
  try{
    const res = await firstAsync()
    console.log(res)
  }catch(err){
    console.log("err")
    console.log(err)
  }
}

第二種處理方法：.catch

• 優勢：代碼優雅，適合對await函數進行異步錯誤處理
• 缺點：須要對返回值再進行一次判斷。

// 定義一個函數，返回promise對象
function firstAsync() {
  return new Promise((resolve,reject) => {
    const a = 0;
    if(a){
      resolve(1)
    }else{
      reject(2)
    }
  })
}


async function hello () {
  // 判斷是否有報錯
  const res = await firstAsync().catch(err =>{
    console.log("err")
    console.log(err)
  })
  if(res){
      //TODO
  }
}

hello();

第三種處理方法，兩個返回值

• 優勢：統一錯誤處理能夠在定義的函數內執行，await調用只須要對返回值進行判斷便可，不須要單獨進行catch處理
• 缺點：返回值是兩個，不容易管理

const awaitWrap = () => {
  let promise = new Promise((resolve,reject) => {
    const a = 0;
    if(a){
      resolve(1)
    }else{
      reject(2)
    }
  })
  return promise
  .then(data => [data, null])
  .catch(err => {
    // 通用錯誤處理寫這裏 TODO
    return [null,err]
  })
}

async function he() {
  const [data, err] = await awaitWrap();
  if(data){
    //若是是reslove走這裏
    console.log(data)
  }else{
    //若是是reject走這裏
    console.log("error")
    console.log(err)
    //特殊錯誤處理寫這裏 TODO
  }
}

he();

ES6-ES10學習版圖