Javascript中async与await的捕捉错误怎么理解

这篇文章主要介绍“javascript中async与await的捕捉错误怎么理解”，在日常操作中，相信很多人在Javascript中async与await的捕捉错误怎么理解问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”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">    <h2>{{ msg }}</h2>    <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>    <h4>Installed CLI Plugins</h4>    <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>    <h4>Essential Links</h4>    <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>    <h4>Ecosystem</h4>    <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中async与await的捕捉错误怎么理解”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！