浅谈怎么利用Async/Await处理错误

菜头同学93331
1,943 阅读4分钟

浅谈怎么利用Async/Await处理错误

前言

在很长一段时间里面，FE们不得不依靠回调来处理异步代码。使用回调的结果是，代码变得很纠结，不便于理解与维护，值得庆幸的是Promise带来了.then()，让代码变得井然有序，便于管理。于是我们大量使用，代替了原来的回调方式。但是不存在一种方法可以让当前的执行流程阻塞直到promise完成。JS里面，我们无法直接原地等promise完成，唯一可以用于提前计划promise完成后的执行逻辑的方式就是通过then附加回调函数。 现在随着Async/Await的增加，可以让接口按顺序异步获取数据，用更可读，可维护的方式处理回调。

本篇文章介绍在使用 async/await 语法时，一种更好的处理错误的方式。

兼容性

Async / Await已经在大多数主流浏览器中可用。

async/await 优雅的错误处理

  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
const fetchData = () => {    return new Promise((resolve, reject) => {        setTimeout(() => {            resolve('fetch data is me')        }, 1000)    })}
(async () => {    try {        const data = await fetchData()        console.log('data is ->', data)    } catch(err) {        console.log('err is ->', err)    }})()

这么看，感觉倒是没什么问题，如果是这样呢？有多个异步操作，需要对每个异步返回的 error 错误状态进行不同的处理，以下是示例代码。

  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
const fetchDataA = () => {    return new Promise((resolve, reject) => {        setTimeout(() => {            resolve('fetch data is A')        }, 1000)    })}
const fetchDataB = () => {    return new Promise((resolve, reject) => {        setTimeout(() => {            resolve('fetch data is B')        }, 1000)    })}
const fetchDataC = () => {    return new Promise((resolve, reject) => {        setTimeout(() => {            resolve('fetch data is C')        }, 1000)    })}
(async () => {    try {        const dataA = await fetchDataA()        console.log('dataA is ->', dataA)    } catch(err) {        console.log('err is ->', err)    }
    try {        const dataB = await fetchDataB()        console.log('dataB is ->', dataB)    } catch(err) {        console.log('err is ->', err)    }
    try {        const dataC = await fetchDataC()        console.log('dataC is ->', dataC)    } catch(err) {        console.log('err is ->', err)    }})()

这样写代码里充斥着 try/catch，有代码洁癖的你能忍受的了吗？这时可能会想到只用一个 try/catch。

  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
// ... 这里 fetch 函数省略
(async () => {    try {        const dataA = await fetchDataA()        console.log('dataA is ->', dataA)        const dataB = await fetchDataB()        console.log('dataB is ->', dataB)        const dataC = await fetchDataC()        console.log('dataC is ->', dataC)    } catch(err) {        console.log('err is ->', err)        // 难道要定义 err 类型，然后判断吗？？        /**         * if (err.type === 'dataA') {         *  console.log('dataA err is', err)         * }         * ......         * */    }})()

如果是这样写只会增加编码的复杂度，而且要多写代码，这个时候就应该想想怎么优雅的解决，async/await 本质就是 promise 的语法糖，既然是 promise 那么就可以使用 then 函数了。

  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
(async () => {    const fetchData = () => {        return new Promise((resolve, reject) => {            setTimeout(() => {                resolve('fetch data is me')            }, 1000)        })    }
    const data = await fetchData().then(data => data ).catch(err => err)    console.log(data)})()

在上面写法中，如果 fetchData 返回 resolve 正确结果时，data 是我们要的结果，如果是 reject 了，发生错误了，那么 data 是错误结果，这显然是行不通的，再对其完善。

  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
(async () => {    const fetchData = () => {        return new Promise((resolve, reject) => {            setTimeout(() => {                resolve('fetch data is me')            }, 1000)        })    }
    const [err, data] = await fetchData().then(data => [null, data] ).catch(err => [err, null])    console.log('err', err)    console.log('data', data)    // err null    // data fetch data is me})()

这样是不是好很多了呢，但是问题又来了，不能每个 await 都写这么长，写着也不方便也不优雅，再优化一下。

  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
(async () => {    const fetchData = () => {        return new Promise((resolve, reject) => {            setTimeout(() => {                resolve('fetch data is me')            }, 1000)        })    }
    // 抽离成公共方法    const awaitWrap = (promise) => {        return promise            .then(data => [null, data])            .catch(err => [err, null])    }
    const [err, data] = await awaitWrap(fetchData())    console.log('err', err)    console.log('data', data)    // err null    // data fetch data is me})()

将对 await 处理的方法抽离成公共的方法，在使用 await 调用 awaitWrap 这样的方法是不是更优雅了呢。如果使用 typescript 实现大概是这个样子。

  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
  • ounter(line
function awaitWrap<T, U = any>(promise: Promise<T>): Promise<[U | null, T | null]> {    return promise        .then<[null, T]>((data: T) => [null, data])        .catch<[U, null]>(err => [err, null])}

小结

Async/Await让我们用少量的代码来使用Promise，我们可以将一些有依赖关系的回调函数的处理逻辑放在async里面，然后在非async的区域使用，这样可以减少then或者catch回调。

avatar
文章
阅读
粉丝