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

更新时间：2022年03月03日 15:05:23 作者：小渣亮

这篇文章主要为大家详细介绍了Javascript中async与await的捕捉错误，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

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>

效果

在这里插入图片描述

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预编译的基本概念和过程详解
JavaScript在执行代码前,会进行一个预编译的过程,这个过程主要用于处理变量和函数声明,预编译分为全局预编译和函数预编译,本文将给大家详细的介绍一下JavaScript预编译的基本概念和过程,需要的朋友可以参考下
2024-05-05
关于JavaScript中var声明变量作用域的推断
这个问题其实之前困扰了我很久。如今终于想明白了，特来分享，如果有错误的地方，请帮忙指正，我会随时回来修正滴。
2010-12-12
js跨浏览器实现将字符串转化为xml对象的方法
将字符串转化为xml对象需要注意的是该死的ie多版本的问题，具体实现如下，感兴趣的朋友不妨参考下本文，希望对大家有所帮助
2013-09-09
js实现动画特效的文字链接鼠标悬停提示的方法
这篇文章主要介绍了js实现动画特效的文字链接鼠标悬停提示的方法,实例分析了javascript操作css的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
Javascript类库的顶层对象名用户体验分析
针对jQuery、Ext、KISSY三者类库的对比及分析已经很多了，但多数是从功能和设计的角度切入，因此本篇文章决定换一个特殊的角度，从各类库的顶层对象名的键盘输入的体验上来对这三个类库进行比较。
2010-10-10
JavaScript获取表单enctype属性的方法
这篇文章主要介绍了JavaScript获取表单enctype属性的方法,涉及javascript操作表单属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-04-04
JavaScript代码实现简单计算器
这篇文章主要为大家详细介绍了JavaScript代码实现简单计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
JavaScript实现的类字典插入或更新方法实例
这篇文章主要介绍了JavaScript实现的类字典插入或更新方法,实例分析了javascript针对类字典的插入与更新技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
d3.js入门教程之数据绑定详解
这篇文章主要介绍了关于d3.js数据绑定的相关资料，文中通过示例代码介绍的非常详细，对大家学习只d3.js具有一定的参考价值，需要的朋友下面来一起看看吧。
2017-04-04
jsp 自动编译机制详细介绍
这篇文章主要介绍了 Jasper的自动检测实现的机制比较简单，依靠某后台线程不断检测JSP文件与编译后的class文件的最后修改时间是否相同，若相同则认为没有改动，但倘若不同则需要重新编译,需要的朋友可以参考下
2016-12-12