vue中axios接口数据封装和使用

vue-axios接口数据封装和使用方法：

在src文件夹下新建http文件夹

可以看见里面有三个子文件. env.js api.js request.js

env.js里面搭建环境：

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

request.js里面创建axios实例，设置请求拦截和响应拦截

import axios from "axios";

const vipUrl = "/api/app/";

const prodUrl = "https://www.365msmk.com";

//创建一个axios实例
const service = axios.create({
  baseURL: prodUrl + 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;

api.js里面封装各种业务的接口

import request from "./request";

//封装业务的各种接口

/**
 * 获取轮播图
 */

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

//名师阵容
export function getBattle() {
  return request({
    url: "/recommend/appIndex",
    method: "GET"
  });
}

//获取验证码
export function get_sms_code(data) {
  return request({
    url: "/smsCode",
    method: "POST",
    data
  });
}

//用户登录
export function userLogin(data) {
  return request({
    url: "login",
    method: "POST",
    data
  });
}

//获取课程列表
export function lessonList(params) {
  return request({
    url: "courseBasis",
    method: "GET",
    params
  });
}

用的时候直接在页面里面引入就可以了

<template>
  <div class="swiper">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in bannerList" :key="index">
        <img v-lazy="image.banner_img" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { getBanners } from "../http/api";
export default {
  name: "swiper",
  data() {
    return {
      bannerList: []
    };
  },
  created() {
    this.getLunBo();
  },
  methods: {
    getLunBo() {
      getBanners().then(res => {
        // console.log(res.data.data);
        this.bannerList = res.data.data;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.swiper {
  .van-swipe {
    width: 100%;
    height: 400px;
    .van-swipe-item {
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>

好了，以上就是axios的接口封装和使用