小程序中优雅的使用async await异步编程

前言
最近开始写一个开源的云开发社区小程序，在写的过程中慢慢的摸索了一些对于开发和测试的过程中又帮助的奇技淫巧。这篇文章讲一下在原生小程序中如何优雅的捕捉异步方法的异常。

传统方法

在ES7中，我们提供了async 和 await两个关键词，主要用于处理异步任务。它们通过把异步任务包装成promise的方式来实现。传统的方法里我们处理promise有三种方式：

1. 回调函数

wx.request({
  url: 'https://example.com',
  success: function (res) {
    // 这里处理成功的回调
  },
  fail: function (res) {
    // 这里处理失败的回调
  }
})

2. 使用.then()和.catch()方法

wx.request({
  url: 'https://example.com'
}).then(res => {
  // 这里处理成功的回调
}).catch(err => {
  // 这里处理失败的回调
})

3. 使用async/await

async function fetch(url) {
  try {
    const res = await wx.request({
      url: url
    })
    // 这里处理成功的逻辑
  } catch (err) {
    // 这里处理失败的逻辑
  }
}

优雅的使用方式

上面三种方式各有优缺点，其中第三种方式最为简洁，但是它有个缺点，就是不优雅。因为我们需要在每个使用await的地方，都加上try...catch，才能捕捉到异常，这就导致代码非常臃肿。

我们可以使用装饰器，优雅的捕捉异常。

function catchAsync(fn) {
  return async (...args) => {
    try {
      return await fn(...args)
    } catch (err) {
      // 这里处理错误的逻辑
    }
  }
}

使用这个装饰器，我们就可以非常优雅的捕捉异常了。

const fetch = catchAsync(async (url) => {
  const res = await wx.request({
    url: url
  })
  return res
})

现在，我们可以在任何地方使用这个fetch函数，而不用担心异常了。

fetch('https://example.com').then(res => {
  // 这里处理成功的逻辑
})

结语

本篇文章介绍了小程序中优雅的使用async await异步编程的方法，希望对大家有所帮助。