«

前端使用mockjs自己生成数据用于API测试

时间:2023-8-12 17:30     作者:小诸葛     分类: 前端     正在检查是否收录...


在没有后端接口的时候,前端可以使用mockjs来自己生成数据,模拟请求。跟正常请求一样使用,非常方便。可以在任何前端框架下使用没有限制。

使用方法:

1.下载包

# 安装
npm install mockjs

# 全局安装
$ npm install mockjs -g

# 执行
$ random url
# => http://rmcpx.org/funzwc

# 帮助
random -h

2.创建目录 /mock/index.ts, 里面引入,这里返回一个单条对象。(当使用请求向user地址发送get请求的时候就会被拦截,并且给你返回这条数据)

import Mock from 'mockjs'

Mock.mock('/user', 'get', () => {
    let data = { name: '张三', age: 18 }
    return data
})

3.在main.ts中挂到全局

import './mock/index'

4.使用axios请求模拟,安装axios

$ npm install axios

$ yarn add axios

5.封装axios 创建utlis/http.ts,引入axios包,创建实例对象,暴露出去。

import axios from 'axios';
const request = axios.create({
    timeout: 5000,
})

export default request

6.封装api方便管理,创建 apis/index.ts, 引入二次封装axios,发送一个get请求,/user,这个请求会被mockjs拦截,并且返回给你对应的数据

import request from 'axios';
export const $_user = (params:void) => {
    return request({
        url: '/user',
        method: 'get',
        params
    })
}

7.使用,在页面引入api 并调用请求,就可以看到结果。

import {$_user} from './apis/index'

前端使用mockjs自己生成数据用于API测试

前端使用mockjs自己生成数据用于API测试 mockjs

推荐阅读:


扫描二维码,在手机上阅读