async...await...异常捕捉封装

前言

async...await...简化了Promise的写法，尤其是后者多次嵌套的情况下，代码可读性很差。但前者的异常捕获却没那么方便

async...await...异常捕获

async function func(val) {
  return new Promise((resolve, reject) => {
    if(val) resolve(val)
    else reject('Invalid value')
  })
}
async function test(val) {
  try {
    const resp = await func(val)
    console.log(resp)
  } catch (err) {
    console.error(err)
  }
}

try...catch...让async...await...的代码既不美观又繁琐

封装异常捕获

common-methods.js

export async function asyncFuncWrapper(func, ...args) {
  try {
	const resp = await func(...args)
	return { resp }
  } catch (err) {
	return { err }
  }
}

demo.vue

<script>
import { asyncFuncWrapper } from '@/utils/common-methods'

export default {
  methods: {
	async func(val) {
	  return new Promise((resolve, reject) => {
	    if(val) resolve(val)
	    else reject('Invalid value')
	  })
	}
	async test(val) {
	  const { resp, err } = await asyncFuncWrapper(this.func, val)
	  if(err) {
	  	console.error(err)
	  	return
	  }
	  console.log(resp)
	}
  }
}
</script>

注意： 本文封装了Promise的异常捕捉，就像，try...catch... 一样，异常 err 已经被捕捉了，需自行处理异常。

处理异常时，需考虑到是否有依赖本方法，且也需要捕捉该异常的方法。有则需要手动抛出异常