Nuxt学习_基础知识（二）

文章学习来源，nuxt中文网

1. 异步数据 AsyncData

1.1 获取并返回数据

AsyncData：在设置组件之前能异步获取或处理数据。async方法会在页面组件每次加载之前调用(没有this)，可以在服务端或路由更新之前调用。在这个方法调用的时候，第一个参数被设定为当前页面的上下文对象，可以利用asyncData方法来获取数据，nuxt.js会将asyncData返回的数据融合组件data返回的数据一并返回给当前组件。

在详情页面使用asyncData调用并返回数据：
pages/detail/_id.vue

export default Vue.extend({
	  asyncData({params}) {
	    console.log(params, '当前params指代的是什么内容') // params指代路径参数，比如详情页面路径上的id
	    return axios.get('http://127.0.0.1:8090/api/fruits').then(({data}) => {
	      console.log(data.dataSource, '返回结果') // 接口返回值
	      return {
	        list: data.dataSource // return中返回的值和设置的属性，会合并到data中
	      }
	    })
  	},
})

• 可以通过Promise、async/await、callback方式来处理返回值，以上述为例，通过Promise方式调用接口return一个属性，属性的值为对应接口的值，这个属性和值会同时被合并到data中，在页面加载完成后即可使用

1.2 处理异步请求

当发起网络请求时，我们通常可能需要对headers中增加信息进行校验，也可能需要对返回的response信息进行处理，可以通过进行封装Axios，增加拦截器来进行处理

• 封装自己的带有拦截器的Axios request/index.js

import axios from "axios";
const myAxios = axios.create({
  baseURL: 'http://127.0.0.1:8090/api'
})

myAxios.interceptors.request.use(
  (req) => {
    req.headers.Authorization = 'XXX' // 在headers中增加信息进行校验等...
    return req
  }
)
myAxios.interceptors.response.use(
  (res) => {
    return {
      data: res.data
    }
  }, // 正确返回时处理response返回至
  (err) => {
    console.log(err)
    // return Promise.reject(err)
  } // 发生错误时，处理错误信息
)
export default myAxios

• 在页面使用封装拦截后的Axios

import myAxios from "~/request";

  async asyncData() {
    try {
      let { data } = await myAxios.get('http://127.0.0.1:8090/api/fruits')
      return {
        list: data.dataSource