使用axios封装一个函数，用来向服务器发送请求，获取数据

• 这里我们封装了一个request 函数，并将其导出，之后只需导入request 就可使用该函数

• 例如 home.vue 面向 home.js 开发， home.js 面向 request.js开发

• request.js

  import axios from "axios";
  
  export function request(config) {
    // 1.创建axios的实例
    const instance = axios.create({
      baseURL: "http://152.136.185.210:7878/api/m5",
      timeout: 5000
    });
  
    // 2.axios的拦截器
    // 2.1.请求拦截的作用
    instance.interceptors.request.use(
      config => {
        return config;
      },
      err => {
        // console.log(err);
      }
    );
  
    // 2.2.响应拦截
    instance.interceptors.response.use(
      res => {
        return res.data;
      },
      err => {
        console.log(err);
      }
    );
  
    // 3.发送真正的网络请求
    return instance(config);
  }
  

• home.js

  import { request } from "./request";
  
  export function getHomeMultidata() {
    return request({
      url: "/home/multidata"
    });
  }
  
  export function getHomeGoods(type, page) {
    return request({
      url: "/home/data",
      params: {
        type,
        page
      }
    });
  }
  
  

• home.vue methods中 调用 .then()方法 获取服务器数据

 getHomeMultidata().then(res=>{
      this.banners=res.data.banner.list;
      this.recommends = res.data.recommend.list;
    })