vue-ssr之nuxt.js 服务端的异步数据交互

在web项目开发中，数据请求是必不可少的；我们通常在vue中使用的数据请求，都是基于浏览器进行的异步请求；那么在nuxt.js框架中,如何实现数据请求呢？现在用一个例子来演示怎么使用axios，实现服务端的异步数据请求。

PS. axios在nuxt.js框架是作为模块在初始化项目的时候就让选择安装的。但是亲测发现似乎没有安装，还是需要运行npm install @nuxtjs/axios --save

在nuxt.config.js中进行如下配置

...
/*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/axios'
  ],
  axios: {
    prefix: '/api/',
    proxy: true // Can be also an object with default options
  },

  proxy: {
    '/api/': {
      target: 'https://www.domian.com/',
      pathRewrite: { '^/api/': '' }
    }
  },
...

在index.vue页面中使用

<template>
<div>
  <img :src="item.content" alt="" v-for="(item, index) in bannerData.banners" key="index">
</div>
</template>

<script>
export default {
  data(){
    return {
      bannerData: {}
    }
  },
  # 这里发起请求，这个请求在页面变异前进行的，所有不能使用this
  async asyncData(content) {
    const res = await content.$axios.$post("/getFDBanner", { location: "88" });
    if (res.resultCode === "1") {
      console.log(res.resultdata);
      return { bannerData: res.resultdata };
    }
  }
}
</script>

<style>

</style>

asyncData 方法

asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。 在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据，Nuxt.js 会将

asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。

注意：由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象

本文参考

• https://axios.nuxtjs.org/
• https://zh.nuxtjs.org/guide/async-data