文章阅读

沉浸阅读完整内容

写文章

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

正在统计阅读人数 正在统计字数
登录收藏0
字号 100%

在没有后端接口的时候,前端可以使用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测试

推荐阅读

4 篇精选
文章 / 164Vue.observable让一个对象变成响应式数据 文章 / 167新电脑运行VUE项目流程 文章 / 166Vue中实现一个深拷贝递归函数 文章 / 165Vue自定义指令进入页面光标自动聚焦到input框上

发表评论

评论 0

还没有评论,欢迎留下第一条讨论。

分享精彩,传递价值

生成专属海报,分享你的文章,让更多人发现好内容

浏览器不支持 Canvas,无法生成海报。

每日签到

每天来这里,记录一点持续积累。

当前积分--积分
本月签到--
本月获得--积分
正在读取