【安装配置mock.js】

这是一个TypeScript+vue3的实战项目，完成axios安装配置之后，接下来安装配置mock.js。

一、mock.js是干什么的

简单来说，mock.js 通过生成模拟数据来替代接口调用，帮助前端更高效地进行开发和测试。
它的主要功能和特点包括:

1. 生成随机数据:可以生成随机数,字母,中文,日期,图片地址等各种随机数据。
2. 模拟接口响应:可以定义接口模拟数据结构和响应,替代真实接口进行开发和测试
3. 延迟响应:可以设置接口响应的延迟时间,模拟真实网络延迟情况。
4. 拦截请求:可以拦截ajax请求,返回预定义的模拟数据。
5. 定时器:支持定时生成和返回模拟数据。

主要应用场景包括:

1. 前端单元测试:替代接口,提供固定数据进行测试。
2. 前端开发:在接口未就绪时使用模拟数据进行开发。

官网： http://mockjs.com/

二、安装

npm install --save mockjs

三、配置

在src目录下，创建一个mock目录配置mock.js，在mock目录下创建index.ts，内容如下：

import Mock from 'mockjs'

//设置请求延时
Mock.setup({
    timeout:'200-2000',//单位为毫秒
})

//设置拦截路径
//mock中有三个参数：拦截路径的正则表达式，请求的方法，响应数据的函数
//Mock.mock(/\/api\/register/,'get',homeApi.getHomeData);

//登陆接口
Mock.mock(/\/api\/testApi/,(req:any)=>{
    console.log(req);
    //return中的数据
    return{
        code:0,
        data:{
            msg:'mock测试成功~~~~'
        }
    }
})

export default Mock;

四、在项目中使用

在main.ts中引用，import './mock'
main.ts的全部内容：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vant from 'vant';
import 'vant/lib/index.css';
import axios from './axios/axiosConfig';
import './mock'

const app=createApp(App);
//将axios挂载到app这个实例上
app.config.globalProperties.$http=axios;
app.use(store).use(vant).use(router).mount('#app')

在test.vue修改发送ajax请求的请求地址：

五、测试是否拦截成功

运行项目npm run serve