封装项目中的接口

1.首先创建一个http文件夹，里面创建三个文件，分别是env.js  request.js  api.js

env.js来管理环境    request封装方法的主要文件   api.js用来管理接口

在env.js来配置环境

export default {
  //开发环境
  dev: {
    baseUrl: "https://localhost:8080"
  },
  //测试环境
  test: {
    baseUrl: "https://test.365msmk.com"
  },
  //生产环境
  prod: {
    baseUrl: "https://www.365msmk.com"
  }
};

2.在request.js进行axios拦截，执行请求前和请求后进行的一些操作

import axios from "axios";

import env from "./env.js";

const vipUrl = "/api/app/";

//创建一个axios实例
const service = axios.create({
  baseURL: env.prod.baseUrl + vipUrl
});

//请求拦截

service.interceptors.request.use(
  config => {
    config.headers["deviceType"] = "H5";
    console.log("请求的数据:", config);
    return config;
  },
  error => {
    return Promise.reject("出错啦");
  }
);

//响应拦截
service.interceptors.response.use(
  response => {
    //根据返回不同的状态码来做后续处理
    console.log("返回的数据", response);
    return response;
  },
  error => {
    return Promise.reject("返回报错");
  }
);

export default service;

3.最后在api.js中封装接口并抛出

import request from "./request";

//封装业务的各种接口

/**
 * 获取轮播图
 */

export function getBanners() {
  return request({
    url: "/banner",
    method: "GET"
  });
}
}

4.最后在组件中引用，请求数据

<template>
  <div class="home">
     
  </div>
</template>

<script>
import { banner} from "../http/api";
export default {
  name: "Home",
  mixins:[GetUserDataMixIn],
  data() {
    return {
      page: 1,    //定义接口中要传的当前页数
      limit: 10,   //定义接口中要传的数据条数
      list: []
    };
  },
  
  created() {
    this.getBannersData();
  },
 
  methods: {
    //获取课程列表
    getBannersData() {
      getBanners({
        page: this.page,
        limit: this.limit
      }).then(res => {
        //console.log("课程列表", res);
        let {
          code,
          data: { list }
        } = res.data;
        if (code === 200) {
          console.log("list:", list);
          this.list = list;
        }
      });
    },
};
</script>

<style lang="scss">
</style>

 

最后就可以获取数据了