react+mockjs+axios使用

步骤

1. 在根目录新建mock文件夹，在文件夹下新建两个文件： index.js（暴露mock接口）、todo.js（mock接口）
2. 在根目录新建utils文件夹，在文件夹下新建request.js（请求拦截）文件
3. 在根目录新建api/todo文件夹，在文件夹下新建index.js（此文件存放request接口）文件
4. 在根目录入口文件 index.js文件中引入mock/index 文件
5. 在组件中引入api接口文件使用暴露的几

目录结构

Mock

todo.js(mock todo接口)

import Mock from 'mockjs'


const Random = Mock.Random


Mock.setup({
  timeout: '500',
})


function createUsers() {
  let user = []
  while (true) {
    user.push({
      name: Random.first(),
      sex: Random.boolean(1, 1, true) ? 'male' : 'female',
      age: Random.integer(20, 50),
    })
    if (user.length === 2) break
  }
  return user
}


const todos = [
  {
    url: '/getUsers',
    type: 'get',
    response: () => {
      return Mock.mock({
        'users|3-5': createUsers(),
      })
    },
  },
  {
    url: '/addUser',
    type: 'post',
    response: (data) => {
      return Mock.mock({
        data,
      })
    },
  },
]


export default todos

index.js(mock接口导出文件)

import Mock from 'mockjs';


import todo from './todo'


const mocks = [
  ...todo
]


for( const item of mocks) {
  Mock.mock(item.url, item.type, item.response)
}

Utils

import axios from 'axios'


export const GET_TODO_URL = '/todo'


const instance = axios.create({
  baseURL: '/',
  timeout: 1000,
})


instance.interceptors.request.use(
  function (config) {
    console.log(config)
    return config
  },
  function (error) {
    return Promise.reject(error)
  },
)


instance.interceptors.request.use(
  function (response) {
    return response
  },
  function (error) {
    return Promise.reject(error)
  },
)


export default instance

API

import request from './../../utils/request'


export function getTodoApi() {
  return request({
    url: '/getUsers',
    method: 'get',
  })
}


export function editTodoApi(data) {
  return request({
    url: '/addUser',
    method: 'post',
    data,
  })
}

Index引入

// 引入mock
import './mock/index'

组件中使用

import { getTodoApi } from '../../api/user'


const getTodoInfo = async () => {
  const res = await getTodoApi()
  console.log(res)
}


useEffect(() => {
    getTodoInfo() // 调用


    return () => {}
  }, [])

错误处理

404错误

解决：

1. 请确定正确引入了mock文件

2. 请确认正确配置了baseURL