axios二次封装，mock前端模拟后端接口

axios二次封装

封装request，然后不用每次遇到接口就使用axios进行调用接口。封装一个基地址，然后每次调用接口的时候，只用写出来自己的函数方法就好。

我们基于脚手架进行封装，创建vue项目，然后下载axios。基于网站 axios官网

使用npm进行下载，npm i axios 下载完毕之后开始进行封装，我们封装到js文件当中

使用axios的create方法创建一个axios实例，然后我们在实例上配置一些属性，对外进行暴漏，通过实例调用具体的请求方法，这样就可以调用我们配置的参数。

在src文件夹中创建utils（工具函数）文件夹，在utils中创建request.js文件，在src/utils/request.js中创建我们的方法

import axios from "axios";

const request = axios.create({
  baseURL: "/api", //基地址通用地址前缀
  timeout: 5000, //响应的超时时间
  //headers: "", //请求头
});

export default request; //对外进行暴漏

在src/utils/request.js中添加请求拦截器和响应拦截器

import axios from "axios";

const request = axios.create({
  baseURL: "/api", //基地址通用地址前缀
  timeout: 5000, //响应的超时时间
});

// 添加请求拦截器;
request.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    console.log("添加token");
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
request.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    console.log("token");
    return response.data; // axios会给我们的接口添加一层data，我们直接在响应中解构出来
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default request; //对外进行暴漏

然后创建api文件夹，里边存放每个细小的接口，也就是我们的具体请求接口。

首先引入我们封装的工具类，也就是我们封装的axios实例化对象。引入我们封装的axios实例化对象，然后创建函数

import require from "./require";
//调用实例的get方法
export const data = () => {
  // 这里返回一个promised对象
  return require.get("/home/getData"); // 后边添加参数，这个接口没有参数所以不用添加参数
};

我们去App.vue中进行一次尝试调用，会返回404，空接口

  mounted() {
    data().then((data) => {
      console.log(data);
    });
  },

使用async和await进行接口调用

<script>
// 调用api中的方法
import { date } from "./api/api";
export default {
  name: "App",
  // mounted() {
  //   const res = date().then((data) => {
  //     console.log(data);
  //     console.log(res);
  //   });
  // },
  async mounted() {
    const res = await date();
    console.log(date());
    console.log(res);
  },
};
</script>

数据进行解构

// 调用api中的方法
import { date } from "./api/api";
export default {
  name: "App",
  // mounted() {
  //   const res = date().then((data) => {
  //     console.log(data);
  //     console.log(res);
  //   });
  // },
  async mounted() {
    const { data: res } = await date();
    console.log(date());
    console.log(res);
  },
};
</script>

传递参数（我们在页面中调用数据的时候，对接口传递参数）

App.vue中进行参数传递

<script>
// 调用api中的方法
import { date } from "./api/api";
export default {
  name: "App",
  mounted() {
    date(（这里传递的是参数）1).then((data) => {
      console.log(data);
    });
  },
};
</script>

Mockjs工具的时候，模拟后端接口返回

也是使用npm i mockjs 进行下载，下载以后我们就可以调用mock方法

Mock.mock( rurl?, rtype?, template|function( options ) )
第一个是路径，第二个是请求类型，第三个是函数请求类型

在api中创建一个mockServe文件夹，文件里边写一个home.js用来存放数据。和mockServe同级创建文件夹mock.js创建mock.js方法

在mockServe/mock.js中创建方法

import Mock from "mockjs";
// 定义mock请求拦截; 请求一定要是小写
Mock.mock("./api/warehouse/list", "get", function () {
  //拦截到以后的请求处理逻辑
  console.log(`拦截成功`);
}); //域名的地址

记得在main.js中引入mock方法

import "./api/mock";

然后在mockServe/home.js进行数据的存储

这里边的逻辑是，我们定义一个getStatisticalData的对象，然后里边放一个函数，后边把对象定义在mock里面，把数据进行return，我们可以获取到定义对象的方法

引入mock.js进行数据封装

// mock数据模拟
import Mock from "mockjs";

// 图表数据
let List = [];
export default {
  getStatisticalData: () => {
    //Mock.Random.float 产生随机数100到8000之间 保留小数 最小0位 最大0位
    for (let i = 0; i < 7; i++) {
      List.push(
        Mock.mock({
          苹果: Mock.Random.float(100, 8000, 0, 0),
          vivo: Mock.Random.float(100, 8000, 0, 0),
          oppo: Mock.Random.float(100, 8000, 0, 0),
          魅族: Mock.Random.float(100, 8000, 0, 0),
          三星: Mock.Random.float(100, 8000, 0, 0),
          小米: Mock.Random.float(100, 8000, 0, 0),
        })
      );
    }
    return {
      code: 20000,
      data: {
        // 饼图
        videoData: [
          { name: "小米", value: 2999 },
          { name: "苹果", value: 5999 },
          { name: "vivo", value: 1500 },
          { name: "oppo", value: 1999 },
          { name: "魅族", value: 2200 },
          { name: "三星", value: 4500 },
        ],
        // 柱状图
        userData: [
          { date: "周一", new: 5, active: 200 },
          { date: "周二", new: 10, active: 500 },
          { date: "周三", new: 12, active: 550 },
          { date: "周四", new: 60, active: 800 },
          { date: "周五", new: 65, active: 550 },
          { date: "周六", new: 53, active: 770 },
          { date: "周日", new: 33, active: 170 },
        ],
        // 折线图
        orderData: {
          date: [
            "20191001",
            "20191002",
            "20191003",
            "20191004",
            "20191005",
            "20191006",
            "20191007",
          ],
          data: List,
        },
        tableData: [
          { name: "oppo", todayBuy: 500, monthBuy: 3500, totalBuy: 22000 },
          { name: "vivo", todayBuy: 300, monthBuy: 2200, totalBuy: 24000 },
          { name: "苹果", todayBuy: 800, monthBuy: 4500, totalBuy: 65000 },
          { name: "小米", todayBuy: 1200, monthBuy: 6500, totalBuy: 45000 },
          { name: "三星", todayBuy: 300, monthBuy: 2000, totalBuy: 34000 },
          { name: "魅族", todayBuy: 350, monthBuy: 3000, totalBuy: 22000 },
        ],
      },
    };
  },
};

最后在mock.js文件中引入数据，然后对数据进行处理

import Mock from "mockjs";
import data from "./mockServe/home";
// 定义mock请求拦截;
Mock.mock("/api/home/data", "post", data.getStatisticalData()); //域名的地址