mock.js 基本语法和拦截功能

一、基本语法

• GitHub 官网查看

二、拦截功能

拦截功能的主要作用在于：在后端未写好接口时，使用 mockjs 拦截 http 请求，并根据接口文档模拟数据，等接口开发好后，也不需要更改代码，直接不使用 mockjs 代码就行。普通拦截很简单，但如果涉及到参数的获取，就有一些细节需要注意。如果是 GET 请求，Mock.mock(url,type,template | function) 的第一个参数 url 必须为正则表达式，如果发送的是 POST 请求，第一个参数是正则表达式或字符串都可以。详细代码如下：

1、封装 axios

• baseURL.js

const baseURL = "https://www.fastmock.site/mock/0b084ebb8f056de8b07b02b4563e2f27/evernote";
export default baseURL;

• request.js

import axios from "axios";
import baseURL from "./baseURL";
import "./mock.js";

axios.defaults.baseURL = baseURL;

// HTTP 请求。type 和 data 两个参数可以不传。
const request = (url, type = "GET", data = {}) => {
  const options = {
    url,
    method: type,
  };
  if (type.toLowerCase() === "get") {
    options.params = data;
  } else {
    options.data = data;
  }
  return new Promise((resolved, rejected) =>
    axios(options)
      .then((res) => {
        // console.log(res);
        resolved(res.data);
      })
      .catch((err) => {
        // console.log(err);
        rejected(err);
      })
  );
};

// 通过 axios 实例创建拦截器
const http = axios.create();
http.defaults.timeout = 3000;
http.interceptors.request.use(
  (config) => {
    // 请求拦截器配置 // 可不配置
    // do sth
    return config;
  },
  (error) => {
    console.log(error);
    return Promise.reject(error);
  }
);

http.interceptors.response.use(
  (response) => {
    // 响应拦截器配置 // 可不配置
    // do something
    return response;
  },
  (error) => {
    console.log(error);
    return Promise.reject(error);
  }
);

export default request;

2、mockjs 拦截器

• mock.js

import baseURL from "./baseURL";

const Mock = require("mockjs");

const getQuery = (url, name) => {
  const index = url.indexOf("?");
  if (index !== -1) {
    const queryStrArr = url.substring(index + 1).split("&");
    for (var i = 0; i < queryStrArr.length; i++) {
      const itemArr = queryStrArr[i].split("=");
      if (itemArr[0] === name) {
        return itemArr[1];
      }
    }
  }
  return null;
};

// GET 请求。先将 URL 变成正则表达式，再通过 getQuery 拿到参数。
const getMock = Mock.mock(
  RegExp(`${baseURL}/lazyload` + ".*"),
  "get",
  (options) => {
  console.log(options);
    console.log(getQuery(options.url, "id"));
    return { img: "https://tudingtu.cn/i/2023/01/30/i7kc99.png" };
  }
);

// POST 请求。直接通过 option.body 拿到参数。
const postMock = Mock.mock(`${baseURL}/lazyload`, "post", (options) => {
  console.log(options);
  console.log(getQuery(options.body, "name"));
  return { img: "https://tudingtu.cn/i/2023/01/30/i7kc99.png" };
});

export default { getMock, postMock };

3、使用（图片懒加载）

• LazyLoad.vue

<template>
  <div class="img">
    <div v-for="(img,index) in list"
         :key="index">
      <img v-lazy='img' />
    </div>
  </div>
</template>

<script>
import request from '../axios/request.js'

export default {
  data() {
    return { list: [] }
  },
  created() {
    const pathName = 'picture.png'
    for (let i = 0; i < 10; i++) {
      // 加载本地图片。通过 require 导入，参数要为 path 格式。
      // this.list.push(require("../assets/" + pathName))
      // 通过 http 请求加载 faskmock 上的图片
      request('/lazyload', "POST", { id: 1, name: "zs" }).then((data) => {
        this.list.push(data.img)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.img {
  width: 100%;
  div {
    display: flex;
    justify-content: center;
    img {
      width: 50%;
      margin: 20px;
    }
  }
}
</style>