【Mockjs】React + Mockjs 模拟接口

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', 'post', {code: 200,message: 'acrostic success',data: {content: ['我头明月光', '是是地上霜', '藏头望明月', '头头思故乡'],emotion: '悲',},
})Mock.mock('/mock/after', 'post', {code: 200,message: 'after success',data: {content: ['床头明月光', '我是续写啊', '我是续写啊', '我是续写啊'],emotion: '乐',},
})export const random = () => {return fetch({url: '/mock/random',// params: {//   ...params,// },// data: {//   ...params,// },// method: 'GET',})
}export const acrostic = (data: any) => {return fetch({url: '/mock/acrostic',params: {...data},method: 'POST',})
}export const after = (data: any) => {return fetch({url: '/mock/after',params: {...data,},method: 'POST',})
}

再到 src/store/globalStore.ts 中调用相关接口：

import {makeAutoObservable, runInAction} from 'mobx'
import {random, acrostic, after} from 'src/services/api'
import {checkType} from 'src/utils/index.js'
import {message} from 'antd'class GlogalStore {typeNum: number = 0 // 生成古诗类型value: string = '' // 输入框内容loading: boolean = false // 是否正在加载中head: string = '' // 藏头句sentence: string = '' // 古诗首句content: Array<string> = [''] // 生成古诗内容emotion: string = '' // 古诗情感constructor() {makeAutoObservable(this)}async setTypeNum(num = 0) {runInAction(() => {this.typeNum = num})}async generation(val: string) {const type = this.typeNumif (type === 0) {message.warn('请选择生成诗歌的类型！')} else if (val.length === 0) {message.warn('输入不能为空！')} else {let value = checkType(val)runInAction(() => {this.loading = true})switch (type) {case 1:this.randomGeneration()breakcase 2:runInAction(() => {this.head = value})this.acrosticGeneration()breakcase 3:runInAction(() => {this.sentence = value})this.afterGeneration()breakdefault:setTimeout(() => {this.loading = false}, 5000)}}}async randomGeneration() {const res = await random()if (res.code === 200) {runInAction(() => {this.content = res.data.contentthis.emotion = res.data.emotionthis.loading = false})}}async acrosticGeneration() {let params = new FormData()params.append('head', this.head)const res = await acrostic(params)if (res.code === 200) {runInAction(() => {this.content = res.data.contentthis.emotion = res.data.emotionthis.loading = false})}}async afterGeneration() {let params = new FormData()params.append('sentence', this.sentence)const res = await after(params)if (res.code === 200) {runInAction(() => {this.content = res.data.contentthis.emotion = res.data.emotionthis.loading = false})}}
}export default new GlogalStore()

搞定。

【Mockjs】React + Mockjs 模拟接口相关推荐

vue实现多行数据提交_Vue+Mockjs，模拟接口数据，实现前后端独立开发
前后端分工协作是一个非常高效的做法,但是有时前后端分离不彻底会很痛苦.前后端应该是异步进行的,进度互不影响,但是在没有mock的时候,前端却严重依赖后端的接口,总会苦苦等待后端接口出来才能继续开发.为 ...
没有json数据，自己造！mockjs的使用-模拟数据其实超级简单
虽然mockjs已经有好几年没有更新了,但是这个其实跟年限无关,因为它最终的目的是生成模拟json. 而且mockjs可以用于任何webpack项目中,也就是可以在已有的项目中添加mockjs.比如w ...
vue 接口数据排序_Vue 使用 axios 请求 mock 模拟接口的数据
安装使用 axios # axios 安装使用npm install axios --save# main.js 引入 axiosimport axios from 'axios'Vue.proto ...
mock模拟接口测试 vue_VUE使用Mock模拟接口
之前用EASY-MOCK来模拟接口,但是这网站三天两头GG,太生气了~! 发现可以自己在项目里使用Mock,开始使用~ 安装VUE在这里不写了,先从安装Mock开始: 安装mockjs npm ins ...
Java开发中使用模拟接口moco响应中文时乱码
场景在开发中需要依赖一些接口,比如需要请求一个返回Json数据的接口,但是返回Json数据的接口要么是没搭建,要么是交互比较复杂. 此时,就可以使用moco来模拟接口返回接口数据,以便开发和测试工作 ...
Java开发中模拟接口工具moco的使用
场景在开发中需要依赖一些接口,比如需要请求一个返回Json数据的接口,但是返回Json数据的接口要么是没搭建,要么是交互比较复杂. 此时,就可以使用moco来模拟接口返回接口数据,以便开发和测试工作 ...
NodeJs本地搭建服务器，模拟接口请求，获取json数据
最近在学习Node.js,虽然就感觉学了点皮毛,感觉这个语言还不错,并且也会一步步慢慢的学着的,这里实现下NodeJs本地搭建服务器,模拟接口请求,获取json数据. 具体的使用我就不写了,这个博客写 ...
接口同花顺_Fiddler模拟接口数据（mock）
我们在测试过程中,经常会遇到查看不同接口数据前端页面展示的场景,今天我们就一起来看下如何用Fiddler模拟接口数据(mock). 01 mock定义 mock测试就是在测试过程中,对于某些不容易构造 ...
Ariduino入门笔记——1. Arduino 默认函数(数字接口/模拟接口)
说实话,对于我这种朝三暮四,动不动就要开新坑的人来说,肯定很多人都烦死了.没办法,因为脑袋里的猴子有点多,一直做一件事的话,我反而很容易就弃坑.也就是所谓新鲜感,隔一段时间回过头来看看草稿箱里有哪些稿 ...

【Mockjs】React + Mockjs 模拟接口

React + Mockjs 模拟接口

【Mockjs】React + Mockjs 模拟接口相关推荐

最新文章

热门文章