microblog | 微博客
原创
访问
0
获赞
0
评论
相关推荐
暂无数据
最新文章
暂无数据
热门文章
暂无数据

Nuxt异步获取

写完bug就找女朋友 2022年02月28日 13:30:05 461 148 0
分类专栏: Vue Nuxt.js NuxtJs

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

  1. 安装 @nuxtjs/axios:

Nuxt.js 官方提供了 @nuxtjs/axios 模块,此模块中还包含了 axios@nuxtjs/proxy 模块。其中 @nuxtjs/proxy是解决 Nuxt 中跨域问题,进行代理转发请求。

所以我们只要安装@nuxtjs/axios 即可:

npm install @nuxtjs/axios
  1. nuxt.config.js 引入 @nuxtjs/axios 模块:
modules: [ '@nuxtjs/axios', ],
  1. 使用asyncData方法
    (Nuxt.js 提供了几种不同的方法来使用 asyncData方法,下面提供两种方法)
  • 方式1: 使用 axios 返回 Promise
<template> <div class="container"> <h2> 首页标题: {{title}}</h2> <ul> <li>标题:{{data.title}}</li> <li>内容:{{data.content}}</li> <li>作者:{{data.author}}</li> </ul> </div> </template> <script> export default { data() { return { title: '博客文章列表页' } }, // 加载组件之前服务端会调用 // 方式1:使用了两个return asyncData({$axios}) { return $axios.$get('http://mengxuegu.com:7300/mock/5ea4394b2a2f716419f893be/blogweb/test') .then(response => { console.log('response', response) const data = response.data return { data }// {data: data} }) } // head省略 } </script>
  • 方式2: 使用 async与await
export default { // 方式2 请求数据接口 async await async asyncData( {$axios} ) { const response = await $axios.$get('http://xxxxxxx/blog-web/test') console.log('response', response) return {data: response.data} } }


评论区

登录后参与交流、获取后续更新提醒

目录
暂无数据