【Vue项目复习笔记】请求首页多个数据

当我们把tabbar封装好以后，想要展示轮播图，此时我们最先要做的就是要获取数据

获取数据
通过axios向后台发起请求。 我们在文件夹的network中新建request.js文件，在该文件中实现对网络的封装

//对网络模块的封装
import axios from 'axios';

export  function request(config){
  const instance=axios.create({
    baseURL:"http://152.136.185.210:7878/api/hy66",
    timeout: 5000,
  });
  //拦截器
  instance.interceptors.request.use(
    (config)=>{
      return config;
    },
  (err)=>{
    // console.log(err);
  }
  );

  //响应拦截：
  instance.interceptors.response.use(
    (res)=>{
      return res.data;
    },
    (err)=>{
      // console.log(err);
    }
  );

  //发送自己的网络请求
  return instance(config);
  //返回的是promise
}

因为导入了axios，所以我们还需要安装axios

首页Home.vue直接面向request.js做网络封装，但是如果再封装一层会更好，Home.vue面向home.js开发会更直观，在这个里面封装所有与首页相关的请求

import { request } from "@/network/request";

export function getHomeMultidata() {
  // 获取首页多个数据,这个return把request这个函数的返回值返回
  return request({
    url: "/home/multidata",
  });
}

接下来就是将home.js中的函数导入到Home.vue中

import {getHomeMultidata} from '@/network/home';

在Home.vue中创建生命周期函数，发送网络请求

created() {
    //组件创建完以后，赶紧发送网络请求，请求多个数据
    // create里面的this就是我们当前的组件对象
    getHomeMultidata().then(res=>{
      //所以下面this.banner拿到的就是我们上面在data里面定义的banner
      //即使我的数据执行完毕也不会消失
      this.banners=res.data.banner.list;
      this.recommends=res.data.recommend.list;
    })
  },

为什么在created里面呢？原因是在created中，data和methods都已经被初始化好了，如果要调用methods中的方法或者操作data中的数据，最早也只能在created中操作。
其中我们还需要定义

 data(){
    // 这个用来存储上面请求过来的数据，因为上面请求是一个局部变量，请求完了以后，会有垃圾回收机制发挥作用，所以我们需要添加变量用来保存它
    return{
      banners:[],
      recommends:[]
    }
  },

需要添加变量用来保存我们上面请求下来的数据 ，因为垃圾回收机制的存在，在局部作用域中没有保存就会被内存回收掉。又因为我们目前只需要轮播图的数据和下面的推荐数据，所以我们只需要在data中保存banner和recommend数据。