Javascript中async与await的捕捉错误详解


Posted in Javascript onMarch 03, 2022

async与await捕捉错误

正常的输出时

<template>
  <div class="hello">
	</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  created() {
    this.init()
  },
  methods: {
    init() {
      let p1 = new Promise((resolve) => {
        setTimeout(() => {
          resolve(666)
        }, 1000)
      })
      async function run() {
        let res = await p1
        console.log('res', res)
      }
      run()
      // 正常的调用时候:log输出 666
    },
  },
}
</script>

try catch捕捉错误

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br />
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      let p1 = new Promise((reject) => {
        setTimeout(() => {
          reject(new Error('错误了哦'))
        }, 1000)
      })
      async function run() {
        try {
          let res = await p1
          console.log('res', res)
        } catch (error) {
          console.log('error', error)
        }
      }
      run()
      // 报错运行 res Error: 错误了哦
    },
  },
}
</script>

多个异步嵌套时

没有try {} catch {} 捕捉错误的

<template>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      let p1 = new Promise((resolve) => {
        setTimeout(() => {
          // reject(new Error('错误了哦'))
          resolve(1)
        }, 1000)
      })
      let p2 = function (arg) {
        return new Promise((reject) => {
          setTimeout(() => {
            console.log('arg', arg)
            reject(new Error('错误了哦'))
          }, 1000)
        })
      }
      async function run() {
        const res1 = await p1
        console.log('res1', res1) // 1
        const res2 = await p2(res1)
        console.log('res2', res2) // res2 Error: 错误了哦
      }
      run()
    },
  },
}
</script>

适使用try{} catch {} 捕捉错误的

<template>
  <div>HelloWorld</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  components: {},
  data() {
    return {}
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      let p1 = new Promise((resolve) => {
        setTimeout(() => {
          // reject(new Error('错误了哦'))
          resolve(1)
        }, 1000)
      })
      let p2 = function (arg) {
        return new Promise((reject) => {
          setTimeout(() => {
            console.log('arg', arg)
            reject(new Error('错误了哦'))
          }, 1000)
        })
      }
      async function run() {
        try {
          var res1 = await p1
          console.log('res1', res1)
        } catch (error) {
          return new Error('error1', error)
        }
        try {
          const res2 = await p2(res1)
          console.log('res2', res2)
        } catch (error) {
          return new Error('error2', error)
        }
      }
      run()
    },
  },
}
</script>
<style lang="scss" scoped></style>

效果

Javascript中async与await的捕捉错误详解

 await-to-js

await-to-js官网

异步嵌套使用了try,代码相对不够智能

  • 特别使用第三方的npm包 await-to-js
  • 作用:无需 try-catch 即可轻松处理错误的异步等待包装器
  • 下载:yarn add await-to-js -S
  • 使用
<template>
  <div>HelloWorld</div>
</template>

<script>
import awaitTo from 'await-to-js'
export default {
  name: 'HelloWorld',
  components: {},
  data() {
    return {}
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      let p1 = new Promise((resolve) => {
        setTimeout(() => {
          // reject(new Error('错误了哦'))
          resolve(1)
        }, 1000)
      })
      let p2 = function (arg) {
        return new Promise((reject) => {
          setTimeout(() => {
            console.log('arg', arg)
            reject(new Error('错误了哦'))
          }, 1000)
        })
      }
      async function run() {
        const [err, res1] = await awaitTo(p1)
        if (err) throw new Error('错误1')
        console.log('res1', res1)
        const [err2, res2] = await awaitTo(p2(res1))
        if (err2) throw new Error('错误2')
        console.log('res2', res2)
      }
      run()
    },
  },
}
</script>
<style lang="scss" scoped></style>

效果:

Javascript中async与await的捕捉错误详解

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注三水点靠木的更多内容!       

Javascript 相关文章推荐
javascript 避免闭包引发的问题
Mar 17 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
Vue如何清空对象
Mar 03 #Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 #Vue.js
javascript之Object.assign()的痛点分析
Mar 03 #Javascript
vue实现移动端div拖动效果
Mar 03 #Vue.js
vue实现滑动解锁功能
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 #Javascript
Vue全局事件总线你了解吗
Feb 24 #Vue.js
You might like
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
商务会议邀请函
2014/01/09 职场文书
乡镇办公室工作决心书
2014/03/11 职场文书
普通党员对照检查材料
2014/08/28 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
匿名信格式范文
2015/05/27 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL