nuxt.js async封装

Nuxt.js 是一个基于 Vue.js 的服务器端渲染框架，它提供了一些方便的功能来帮助我们快速开发应用程序。其中，asyncData 方法可以让我们在组件初始化之前获取数据并进行渲染，但是使用它还需要自己手动处理异步请求的逻辑。因此，我们可以封装一下 asyncData 方法，使其更加方便使用。

以下是一个简单的 async 封装示例：

export default function asyncMethod (fn) {
  return function (context) {
    return fn.call(this, context).catch(error => {
      console.error(error)
      context.error({ statusCode: 404, message: 'Page not found' })
    })
  }
}

这个方法接收一个函数 fn 作为参数，它会返回一个新的函数。新函数接收一个 context 对象作为参数，这个对象包含了当前请求的上下文信息，如路由参数、Vuex 状态等。新函数会调用传入的函数 fn，并且使用 Promise.catch() 方法来处理异常情况，同时调用 context.error() 方法来触发错误页面的渲染。

我们可以在组件中使用 asyncMethod 方法来封装异步请求逻辑，如下所示：

import asyncMethod from '~/utils/asyncMethod'

export default {
  asyncData: asyncMethod(async ({ $axios }) => {
    const { data } = await $axios.get('/api/data')
    return { data }
  })
}

这样，我们就可以在组件中像使用普通的 asyncData 方法一样使用封装后的 asyncMethod 方法，同时避免了手动处理异步请求的逻辑。