第五章 异步加载数据 asyncData

Nuxt.js 扩展了 Vue.js,增加了一个 asyncData 的方法，使得我们可以在渲染组件之前异步获取数据。
asyncData 方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。 在这个方法被调用的时候，第一个参数 context 被设定为当前页面的上下文对象，你可以利用 asyncData 方法来获取数据，Nuxt.js 会将 asyncData 返回的数据与 data 方法返回的数据一起合并后返回给当前组件。

调用后台数据接口采用 axios 异步发送请求，所以下面我们要先安装它。

安装 @nuxtjs/axios

参考官网：https://axios.nuxtjs.org/
Nuxt.js 官方提供了 @nuxtjs/axios 模块，此模块中还包含了 axios 、@nuxtjs/proxy 模块。其中 @nuxtjs/proxy
是解决 Nuxt 中跨域问题，进行代理转发请求。
所以我们只要安装 @nuxtjs/axios 即可：

npm install @nuxtjs/axios

2. 在 nuxt.config.js 引入 @nuxtjs/axios 模块

modules: [
  '@nuxtjs/axios',
],

使用 axios 返回 Promise

1. 注意 ：因为 asyncData方法是在当前组件加载之前被调用，不能在 asyncData 方法体中用 this 传值

asyncData(context) {
    context.app.myContextFunction('asyncData')
    context.app.$myAllFunction('asyncData')

    return context.$axios
      .$get(
        'https://mock.mengxuegu.com/mock/60823ab36e9d26160e7c8b14/blog-web/test'
      )
      .then((response) => {
        console.log('response:', response)
        const data = response.data
        return { data }
      })
  },

使用 async与await

async asyncData(context) {
    context.app.myContextFunction('asyncData')
    context.app.$myAllFunction('asyncData')

    return await context.$axios
      .$get(
        'https://mock.mengxuegu.com/mock/60823ab36e9d26160e7c8b14/blog-web/test'
      )
      .then((response) => {
        console.log('response:', response)
        const data = response.data
        return { data }
      })
  },

$axios 拦截器

1. 创建 plugins/interceptor.js 请求拦截器

export default ({ store, route, redirect, $axios }) => {
  $axios.onRequest((config) => {
    console.log('请求拦截器')
    return config
  })

  $axios.onResponse((response) => {
    console.log('响应拦截器', response)
    return response
  })

  $axios.onError((error) => {
    console.log('error.response.status', error.response.status)
  })
}

2. 引入插件

plugins: [
    '~/plugins/vue-inject.js',
    '~/plugins/ctx-inject.js',
    '~/plugins/all-inject.js',
    '~/plugins/interceptor.js',
  ],

image.png