【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.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()

搞定。