首页 > 网络编程 > JavaScript > javascript类库 > React > react使用json-server获取数据

react项目使用json-server模拟接口获取数据的操作方法

2025-11-13 11:45:46 作者：^^为欢几何^^

文章介绍了如何在React项目中使用json-server模拟接口并获取数据,首先安装json-server,创建JSON格式的数据文件,并在package.json中添加启动命令,启动服务后,可以通过指定的路径获取模拟的数据,感兴趣的朋友一起看看吧

一、安装 json-server

pnpm add json-server -D

二、创建JSON格式的数据

在项目根目录（或 src/mock/）下新建一个文件：

/mock/db.json

内容示例：

{
  "users": [
    { "id": 1, "name": "张三", "age": 25 },
    { "id": 2, "name": "李四", "age": 30 }
  ],
  "products": [
    { "id": 1, "name": "iPhone 15", "price": 9999 },
    { "id": 2, "name": "MacBook Pro", "price": 19999 }
  ]
}

三、在 package.json 中添加启动命令

{
  "scripts": {
    "dev": "vite", 
    "mock": "json-server --watch mock/db.json --port 5174 --delay 500"
  }
}

说明：

--watch 表示监听文件变化自动更新；
--port 5174 指定端口号（你可以改成自己喜欢的）；
--delay 500 模拟网络延迟（单位毫秒）。

四、启动json-server服务

json-server --watch db.json --port 5174

注：这里的端口号便是你在package.json，这里要对应起来。

五、获取接口返回的数据

const [users, setUsers] = useState([])
useEffect(() => {
    axios.get("http://localhost:5174/users").then(res => {
      setUsers(res.data)
    })
  }, [])

注释：这里的'/users'路径就是根据你在JSON文件定义的对象名定的，例如你要获取上述的porducts数据，则是请求路径后面是'/products'

到此这篇关于react项目使用json-server模拟接口获取数据的文章就介绍到这了,更多相关react使用json-server获取数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！