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学习版图