【Mockjs】React + Mockjs 模拟接口

最新推荐文章于 2025-04-03 12:59:30 发布

原创

最新推荐文章于 2025-04-03 12:59:30 发布

· 746 阅读

2 ·

版权

文章标签：

#react.js #前端 #mobx #mockjs #typescript

React + Mockjs 模拟接口

安装 mockjs 依赖：

pnpm i install mockjs -D

安装 axios：

pnpm install axios --save

配置 src/services/fetch.js 文件：

import axios from 'axios'

const fetch = axios.create({
   
  withCredentials: true,
})

fetch.interceptors.request.use(
  async config => {
   
    return config
  },
  err => {
   
    return Promise.reject(err)
  },
)

fetch.interceptors.response.use(
  axiosRes => {
   
    if (axiosRes.data.result !== 0) {
   
      return axiosRes.data
    } else {
   
      return axiosRes.data
    }
  },
  axiosErr => {
   
    return axiosErr.response
  },
)

export default fetch

新建 src/services/api.ts 模拟接口：

import Mock from 'mockjs'
import fetch from './fetch.js'

Mock.mock('/mock/random', 'get', {
   
  code: 200,
  message: 'random success',
  data: {
   
    content: ['床头明月光', '疑是地上霜', '举头望明月', '低头思故乡'],
    emotion: '思',
  },
})

Mock.mock('/mock/acrostic', &#