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实现段落的收缩与展开,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-06-06
  • JS大坑之19位数的Number型精度丢失问题详解

    JS大坑之19位数的Number型精度丢失问题详解

    这篇文章主要介绍了JS大坑之19位数的Number型精度丢失问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 微信小程序整个页面的自动适应布局的实现

    微信小程序整个页面的自动适应布局的实现

    这篇文章主要介绍了微信小程序整个页面的自动适应布局的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • javascript控制层显示或隐藏的方法

    javascript控制层显示或隐藏的方法

    这篇文章主要介绍了javascript控制层显示或隐藏的方法,涉及javascript操作页面元素样式的相关技巧,非常简单实用,需要的朋友可以参考下
    2015-07-07
  • 说明你的Javascript技术很烂的五个原因

    说明你的Javascript技术很烂的五个原因

    Javascript在互联网上名声很臭,但你又很难再找到一个像它这样如此动态、如此被广泛使用、如此根植于我们的生活中的另外一种语言。
    2011-04-04
  • JavaScript中in和hasOwnProperty区别详解

    JavaScript中in和hasOwnProperty区别详解

    in操作符只要通过对象能访问到属性就返回true。hasOwnProperty()只在属性存在于实例中时才返回true。下面通过本文给大家分享JavaScript中in和hasOwnProperty区别详解,感兴趣的朋友一起看看吧
    2017-08-08
  • JS中promise特点与信任问题解决

    JS中promise特点与信任问题解决

    大家都知道Promise解决了回调地狱的问题,“回调地狱”所说的嵌套其实是指异步的嵌套,它带来了两个问题:可读性的问题和信任问题,下面这篇文章主要给大家介绍了关于JS中promise特点与信任问题解决的相关资料,需要的朋友可以参考下
    2022-06-06
  • 微信小程序学习之wxs使用教程

    微信小程序学习之wxs使用教程

    这篇文章主要给大家介绍了关于微信小程序学习之wxs使用教程的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • JavaScript工厂模式详解

    JavaScript工厂模式详解

    这篇文章主要介绍了JavaScript设计模式之工厂模式,结合完整实例形式分析了工厂模式的概念、原理及javascript定义与使用工厂模式的相关操作技巧,需要的朋友可以参考下
    2021-10-10
  • JavaScript安全加密之禁止别人调试自己的前端页面代码实现

    JavaScript安全加密之禁止别人调试自己的前端页面代码实现

    这篇文章主要为大家介绍了JavaScript安全加密之如何禁止别人调试自己的前端页面代码实现,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08

最新评论