(四)01 -异步数据——asyncData方法获取异步数据 & Nuxt.js提供使用 async方法获取接口数据 & 在线测试接口的使用

异步数据——asyncData方法获取异步数据 & Nuxt.js提供使用 async方法获取接口数据 & 在线测试接口的使用

教程

Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。

asyncData 方法

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

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

Nuxt.js 提供了几种不同的方法来使用 asyncData 方法，你可以选择自己熟悉的一种来用：

1. 返回一个 Promise, nuxt.js会等待该Promise被解析之后才会设置组件的数据，从而渲染组件.
2. 使用 async 或 await (了解更多)

我们使用 axios 重构 HTTP 请求, 我们 强烈建议您 使用我们的 axios 模块 用于您的Nuxt项目中。

如果您的项目中直接使用了node_modules中的axios，并且使用axios.interceptors添加拦截器对请求或响应数据进行了处理，确保使用 axios.create创建实例后再使用。否则多次刷新页面请求服务器，服务端渲染会重复添加拦截器，导致数据处理错误。

import axios from 'axios'
const myaxios = axios.create({
  // ...
})
myaxios.interceptors.response.use(function (response) {
  return response.data
}, function (error) {
  // ...
})

• 测试用的接口

  • https://github.com/typicode/jsonplaceholder
    • 打开第一个网址链接：https://jsonplaceholder.typicode.com/
    • 往下拉点击-选取用户user接口：https://jsonplaceholder.typicode.com/users

• asyncData

  • Nuxt 中额外增加的 vue 生命周期的钩子函数
  • 在服务端执行，请求是由服务端发送
  • 没有 Vue 实例的 this，this 指向 undefined
  • 把异步获取到的数据，作为对象返回，并合并到data中
  • 路由切换的时候，会在客户端执行

• 使用

  async asyncData() {
    // console.log(this)
    const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts')
    return {
      list: data
    }
  }
  

示例：

第一步：选择用户user接口中name属性验证：https://jsonplaceholder.typicode.com/users

第二步：请求接口，需要安装axios，在命令行中输入

npm i axios

第三步：在user/index.vue中导入axios，调用axios发送请求

import axios from 'axios'
export default {
  // 异步数据
  // 会在组件创建之前执行（服务端）
  // 路由跳转的时候执行（客户端）
  // asyncData返回的数据，会融合到组件的data里
  // asyncData是在组件创建之前执行的，所以this无法获取到组件对象（this指向undefined）
  // 负责：在组件创建之前获取异步数据
  async asyncData () {   
    console.log('asyncData')  //验证 async asyncData ()这句话是在服务端执行的
      //axios.get  返回的是一个响应对象，里面有一个属性 data ，data是服务器返回的真实数据
    const { data } = await axios.get('https://jsonplaceholder.typicode.com/users')
    return {
      userList: data
    }
  },
  data () {
    return {
      name: 'zs'
    }
  },
  created () {
    console.log(this)
  }

第四步：在user/index.vue中的div里遍历渲染接口数据-name

 <ul>
      <li
        v-for="user in userList"
        :key="user.id">{{ user.name }}</li>
    </ul>

第五步：打开页面，查看是否可以 获取接口数据-是服务端渲染

注：

如何证明是服务端渲染？

F12打开源代码进行检查，如果能看到接口数据代码，就证明是服务端渲染

验证

 console.log('asyncData')  //验证 async asyncData ()这句话是在服务端执行的

打开页面的控制台，验证服务端渲染，显示打印结果

验证路由跳转——客户端执行,点击-用户详情

  // 路由跳转的时候执行（客户端）
  // asyncData返回的数据，会融合到组件的data里

注意：

服务端请求接口，在Network无法检测到请求；

点击用户详情——>点击首页——>Network里面可以获取到请求数据

查看服务端请求接口