mock看这，巨细

哈喽，朋友们，今天唠唠mock

而且是在vue项目里的mock

一般来说，如果开发进度啥的都正常的话，mock的东西可有可无，但是身为前端，这个东西学还是有必要学一下的，并且，真的很简单。

入座，开炫。

官方定义：生成随机数据，拦截 Ajax 请求

下面我就直接说怎么使用的了，以理解为主，使用方法挺多的，可以看个人习惯，但是目的差不多，搞它。

1 安装mock

npm

npm install mockjs

yarn 

yarn add mockjs

一般来说，可以直接安装成功，是的，就是这么的朴实无华

2 新建mock文件夹（建议但很有必要）

建在src下面即可，另外在mock文件夹之下，建一个index.js文件

3 在你的main.js文件夹里先引入mock文件（这一步先做，后面容易忘）

// 导入mock

import '@/mock/index.js'

4 现在再来看index.js文件夹里该怎么做了

// 导入

import Mock from "mockjs";

// 引入模拟数据（自定义）

import list from "./json/page.json";

// 模拟分类列表数据接口

Mock.mock("/mock/list", "get", {

  code: 200,

  message: "获取数据成功!",

  data: list,

});

 

// 设置全局延时

Mock.setup({

  timeout: '200-400'

})

相信很多朋友有些疑惑我的mock文件夹之下，另外建立的两个文件夹有什么用，这就来说，

其一，是api文件夹，这个稍后细说，主要是为了二次封装使用方便的。

其二，是json文件夹，这个就是我们放模拟数据的地方，也是模拟数据成功之后返回的。

{

  "current":1,

  "size": 10,

  "total":100,

  "data":{

    "id":1,

    "name":"阿喵"，

  }

}

5 其实到了这一步已经可以去请求数据了，但是为了更方便的发请求，我们可以把mock数据也进行二次封装 

再新建一个mockAxios.js文件,内容：

// mock接口请求的封装 要拦截Ajax请求

import axios from "axios";

const service = axios.create({

  baseURL: "/mock",

  timeout: 20000,

});

service.interceptors.request.use((config) => {

  return config;

});

service.interceptors.response.use(

  (response) => {

    return response.data;

  },

  (error) => {

    alert("请求出错: " + error.message || "未知错误");

    return Promise.reject(error);

  }

);

export default service;

 6 在mock文件夹下可再建一个api文件夹（命名自定义）

这里简单示例一下

import service from "@/service/mockAxios";

// 获取我的页面列表

export function getMyPages(params) {

  return service({

    url: '/list',

    method: "get",

    params

  })

}

 

7 最后一步，就是引入请求，使用看是否成功了

引入

import { getMyPages } from "@/mock/api/page" 

使用

 created(){

this.getPageList()

},

methods:{

async getPageList() {

      const res = await getMyPages() 

      console.log(res)

    }

}

这里我们再看一下打印结果即可确认是否成功

 

这里是成功了的，拿到数据之后我们就可以像正常取后端数据那样自行使用了，后面的步骤，只需我们自定义数据跟方法即可

今天的分享就到这里了，感谢铁子们捧场嗷嗷嗷~~~