在React中如何使用Mock.js

原创已于 2024-10-30 21:27:16 修改 · 1.1k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #react.js #前端

于 2024-10-30 21:26:42 首次发布

引言

在日常前端开发过程中，我们经常会遇到前后端同时开发，但是后端接口迟迟不来，前端需要进行页面构建和测试，这时候，Mock就出现了。Mockjs 是一款能够模拟生成随机数据，拦截 Ajax 请求并返回模拟数据的工具，它极大地提高了前端开发的效率，让前端开发可以独立于后端进行。

Mock的安装

Mock.js (mockjs.com)

使用npm进行安装mock使用

npm i mockjs

在项目中创建Mock模板

import Mock from 'mockjs'

var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
// console.log(JSON.stringify(data, null, 4))

Mock.mock('/api/getUsers', 'get', {
    code: 200,
    users: data
})

前端main.js中进行导入mock

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import router from './router'
import './mock'
import { RouterProvider } from 'react-router-dom'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <RouterProvider router={router}>

    </RouterProvider>
  </StrictMode>,
)

在Home.jsx中进行使用

import React, { useEffect, useState } from 'react'
import instance from '../api'




export default function Home() {
    const [arr, setArr] = useState([])
    const getUser = async () => {
        const res = await instance.get("/getUsers")
        console.log(res)
    }

    useEffect(() => {
        getUser()
    }, [])

    return (
        <div>Home</div>
    )
}