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

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