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 相关文章推荐
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
layui使用label标签的方法
Sep 14 Javascript
JS精确判断数据类型代码实例
Dec 18 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
js实现抽奖的两种方法
Mar 19 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
php 什么是PEAR?
2009/03/19 PHP
php array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
Javascript window对象详解
2014/11/12 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
《海底世界》教学反思
2014/04/16 职场文书
最美家庭活动方案
2014/08/31 职场文书
践行三严三实心得体会
2014/10/13 职场文书
预备党员介绍人意见
2015/06/01 职场文书