MockjsReact + Mockjs 模拟接口

Posted 2022-12-07 嘻嘻的妙妙屋

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.typeNum
    if (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()
          break
        case 2:
          runInAction(() => 
            this.head = value
          )
          this.acrosticGeneration()
          break
        case 3:
          runInAction(() => 
            this.sentence = value
          )
          this.afterGeneration()
          break
        default:
          setTimeout(() => 
            this.loading = false
          , 5000)
      
    
  

  async randomGeneration() 
    const res = await random()
    if (res.code === 200) 
      runInAction(() => 
        this.content = res.data.content
        this.emotion = res.data.emotion
        this.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.content
        this.emotion = res.data.emotion
        this.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.content
        this.emotion = res.data.emotion
        this.loading = false
      )
    
  


export default new GlogalStore()

搞定。