Nuxt.js 中 asyncData 使用方法介绍

责编:menVScode 2019-05-15 10:56 阅读(1867)

nuxt最重要的就是服务端渲染,首先需要知道什么是服务端渲染,什么是客户端渲染。传统服务端渲染中,是请求页面url,由后端返回html渲染到浏览器中。在spa中所有的渲染都由客户端完成,客户端请求接口,服务端返回的只是数据。这种方式爬虫没有办法抓到页面,也就没有办法处理seo。


为什么我在asyncData打印不出任何东西?

是nuxt在vue基础上扩展的方法,它可以在服务端或路由更新之前被调用。要理解asyncData方法执行时,其实是在服务端完成的,所以打印出来的数据也不能在浏览器的控制台中看到,我们可以在命令行面板中看到打印的信息,这也就说明这是服务端渲染。 官方文档中提到 asyncData方法会在组件(限于页面组件)每次加载之前被调用。意思是asyncData方法只能使用在目录下的.vue文件,子组件内使用 可能无法使用。


如何在asyncData中请求数据

首先asyncData是在服务端执行的,在这个方法里请求数据其实就是用node发起一个请求,有点像接口转发。所以在asyncData中请求数据是不存在跨域问题的,我们要做的只是给出绝对路径的请求接口即可。


请求方式

返回 Promise

export default {
   async asyncData ({params, error}) {
      try {
        const {data: {Articles}} = await axios.get('/api/articleList/0');
        return {
          articleList: Articles,
          page: 0,
          lastpage: true,
          fadetitle: true,
          ScrollFirst: true,
          scrolltip: true,
          scrollload: true,
          scrollloadlast: false,
        };
      } catch (err) {
        error({ statusCode: 404})
      }
    }
}

使用 async、await方式

export default {
  async asyncData ({params, error}) {
      try {
        const {data: {Articles}} = await axios.get('http://binlive.cn/api/articleList/0');
        return {
          articleList: Articles,
          scrollloadlast: false
        };
      } catch (err) {
        error({ statusCode: 404})
      }
    }
}

发起多个请求

export default {
    async asyncData({ params, error }) {
        let [pages, tags] = await Promise.all([
            axios.get('http://binlive.cn/api/post'),
            axios.get('http://binlive.cn/api/tag'),
        ]).catch(err => {
            error({ statusCode: 400, message: err })
        })
        return {
            posts: pages.data.list,
            count: tags.data.tag,
        }
    }
}


axios设置统一的请求地址

通过设置统一的接口地址,我们就可以统一配置,而且不需要给次都重复写url。 首先在目录下创建axios.js文件

import axios from 'axios'

let options = {}
if (process.server) {
  options.baseURL = 'http://localhost:3080'  //设置通用的请求地址
}

export default axios.create(options)

使用

引入axios的方式,必须是从plugins目录下的axios引入

import axios from '~/plugins/axios'  //注意引入axios的地址,是从plugins目录下的axios引入

export default {
    async asyncData ({params, error}) {
      try {
        const {data: {Articles}} = await axios.get('/api/articleList/0');  //此时就可以用类似相对路径的写法
        return {
          articleList: Articles
        };
      } catch (err) {
        error({ statusCode: 404})
      }
    }
}


转化html

在asyncData中请求到数据后,如果是类似文章内容比较多的,需要在方法内完成转换,在得到html片段后,在使用v-html方法渲染到页面,完成服务端渲染。

请求代理

有些时候我们需要在客户端发起请求,也就是不在asyncData中的请求,此时就会产生跨域的问题。这时就可以用webpack中常用的请求转发来解决。 在nuxt中可以用@nuxtjs/axios 和 @nuxtjs/proxy 这个两个模块完成请求转发。 安装依赖 npm install @nuxtjs/proxy @nuxtjs/axios --save-dev 在 nuxt.config.js 文件中添加。

module.exports = {
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  proxy: [
    ['/api', { target: 'http://localhost:3080' }]
  ]
}

此时就可以转发 http://localhost:3080 里的api接口。


部署

nuxt部署需要执行两个命令,先执行nuxt build,完成打包后在执行nuxt start部署一个服务。 在服务端,需要使用pm2守护进程的方式部署node服务,在部署nuxt我们也可以使用pm2完成。 我自定义了两个服务端部署npm script,可以每次只执行一个命令完成pm2方式的nuxt部署。

修改 package.json 中的 scripts

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    "server": "npm run build && pm2 delete blog && pm2 start npm --name 'blog' -- start",
    "firstserver": "npm run build && pm2 start npm --name 'blog' -- start"
}

上面添加了两个 server 和 firstserver 这两个npm script命令。 在第一次部署时执行npm run firstserver,之后每次执行npm run server即可完成更新部署代码。

标签: asyncData Nuxt
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码