一步一步看async&await中异常可以如何处理

一步一步看async&await中异常可以如何处理

我们直接看代码

01-基本情况.js

没做任何错误处理的情况，没有try catch也没有.catch，不可取

代码

function  asyncFun(isOk) {
    return new Promise(function (resolve,reject) {
        setTimeout(() => {
            if(isOk){
              resolve('ok')
            }else{
              reject('error')
            }
          }, 3);
    })
  }
async function normalFun(isOk) {
    var res = await asyncFun(isOk)
    console.info(res)
}
   
//正确
normalFun(true)

//错误
normalFun(false)

执行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SodyNGaW-1614059905572)(一步一步看asynca&wait中异常可以如何处理.assets/image-20210223123512308.png)]

结论

这是不可取的

02-0-基本情况-try-catch.js

使用了try catch，这种用法也用的多

代码

function  asyncFun(isOk) {
  return new Promise(function (resolve,reject) {
    setTimeout(() => {
      if(isOk){
        resolve('ok')
      }else{
        reject('error')
      }
    }, 3);
  })
}
async function normalFun(isOk) {
  try {
    var res = await asyncFun(isOk)
    console.info(res)
  } catch (error) {
    console.info('出错了：'+error)
  }
}
 
//正确
normalFun(true)

//错误
normalFun(false)

执行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aFbBC7A5-1614059905574)(一步一步看asynca&wait中异常可以如何处理.assets/image-20210223123655303.png)]

结论

可以的

特殊情况

不过需要知道一点，try catch不是能捕获所有的异常奥

代码-06_try_catch不是可以捕获所有异常.js

async function run() {
  try {
      // 注意这里是return,不是await
      return Promise.reject('error');
  } catch (error) {
      // 代码不会执行到这里
  }
}
run()

/**
try catch不是可以捕获所有异常，不过，一般也不会去写这样的代码
 */

执行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8j9czqsL-1614059905575)(一步一步看asynca&wait中异常可以如何处理.assets/image-20210223123828214.png)]

02-1-基本情况-try-catch-多asynFun-多try.js

使用了try catch，如果包含多个await操作，那就分别需要多个try catch了

代码

function  asyncFun1(isOk) {
  return new Promise(function (resolve,reject) {
    setTimeout(() => {
      if(isOk){
        resolve('ok')
      }else{
        reject('error')
      }
    }, 3);
  })
}
function  asyncFun2(isOk) {
  return new Promise(function (resolve,reject) {
    setTimeout(() => {
      if(isOk){
        resolve('ok')
      }else{
        reject('error')
      }
    }, 3);
  })
}
function  asyncFun3(isOk) {
  return new Promise(function (resolve,reject) {
    setTimeout(() => {
      if(isOk){
        resolve('ok')
      }else{
        reject('error')
      }
    }, 3);
  })
}
async function normalFun(isOk) {
  try {
    var res = await asyncFun1(isOk)
    console.info(res)
  } catch (error) {
    console.info('出错了：'+error)
  }
  try {
    var res = await asyncFun2(isOk)
    console.info(res)
  } catch (error) {
    console.info('出错了：'+error)
  }
  try {
    var res = await asyncFun3(isOk)
    console.info(res)
  } catch (error) {
    console.info('出错了：'+error)
  }
}
 
//正确
normalFun(true)

//错误
normalFun(false)

执行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gm4qvW5q-1614059905576)(一步一步看asynca&wait中异常可以如何处理.assets/image-20210223124222904.png)]

结论

多个try catch，看着代码有点冗余而已，可以理解

03-基本情况-catch.js

可以的

代码

function  asyncFun(isOk) {
  return new Promise(function (resolve,reject) {
    setTimeout(() => {
      if(isOk){
        resolve('ok')
      }else{
        reject('error')
      }
    }, 3);
  })
}
async function normalFun(isOk) {
    var res = await asyncFun(isOk).catch(err=>{ console.info('出错了：'+err);err})
    if(res){
      console.info(res)
    }
}
 
//正确
normalFun(true)

//错误
normalFun(false)

执行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tFiW9j2E-1614059905577)(一步一步看asynca&wait中异常可以如何处理.assets/image-20210223124601287.png)]

结论

可以的

04-基本情况-catch-const.js

.catch操作配合了js的析构赋值

代码

function  asyncFun(isOk) {
  return new Promise(function (resolve,reject) {
    setTimeout(() => {
      if(isOk){
        resolve('ok')
      }else{
        reject('error')
      }
    }, 3);
  })
}
async function normalFun(isOk) {
    const [err, res] = await asyncFun(isOk).then(res => [null, res] ).catch(err => [err, null])
    if(res){
      console.info(res)
    }else{
      console.info('出错了：'+err)
    }
}
 
//正确
normalFun(true)

//错误
normalFun(false)

执行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EWZjKmIl-1614059905578)(一步一步看asynca&wait中异常可以如何处理.assets/image-20210223124633670.png)]

结论

也可以，不过await asyncFun(isOk).then(res => [null, res] ).catch(err => [err, null])，每个异步函数都要这么去调用的话就有点冗余

05-基本情况-catch-const-封装.js

.catch操作配合了js的析构赋值，而且还做了一个封装，调用方便了很多

代码

function to(callback) {
  return callback.then(data => [null, data] ).catch(err => [err, null])
}

function  asyncFun(isOk) {
  return new Promise(function (resolve,reject) {
    setTimeout(() => {
      if(isOk){
        resolve('ok')
      }else{
        reject('error')
      }
    }, 3);
  })
}
async function normalFun(isOk) {
    const [err, res] = await to(asyncFun(isOk))
    if(res){
      console.info(res)
    }else{
      console.info('出错了：'+err)
    }
}

//正确
normalFun(true)

//错误
normalFun(false)

执行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EIkx0DJM-1614059905579)(一步一步看asynca&wait中异常可以如何处理.assets/image-20210223124740725.png)]

结论

可以的，这个也是参考国外的一个博客https://blog.grossman.io/how-to-write-async-await-without-try-catch-blocks-in-javascript/，网上也很多人说这种写法