在vite+ vue3环境中使用mock接口数据

1、安装axios和mock

yarn add axios
yarn add mockjs

2、封装axios请求

//src/request/axios.js


import axios, { AxiosResponse, AxiosRequestConfig } from 'axios';
import { ElMessage } from 'element-plus'


const service = axios.create({
  timeout:5000
});

// Request interceptors
service.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // do something
    // console.log('config',config);
    
    return config;
   },
   (error: any) => {
    Promise.reject(error);
   }
);

// Response interceptors
service.interceptors.response.use(
  (response: AxiosResponse) => {
    // do something
    // console.log('response',response);
    // return
    if(response.status !== 200){
      ElMessage({
        type:'error',
        message:'服务器忙,请稍后再试~'
      })
      return 
    }

    return response
   },
   (error: any) => {
    // do something
    return Promise.reject(error);
   }
);

export default service;

3、封装接口

//src/api/user/index.js

import service from "@/request/axios";


export function getNewsList (query) {
  return service({
    method:'get',
    url:'/mock/news',
    params:query
  })
}
export function getGoodsList (query) {
  return service({
    method:'post',
    url:'/mock/goods',
    data:query
  })
}

4、配置mock接口

//src/mock/goods.js

// 引入mockjs
import Mock from 'mockjs'
// 获取 mock.Random 对象
const Random = Mock.Random

const produceGoodsData = function (data) {
  console.log(data,'接收post参数');
  let body  = JSON.parse(data.body)
  console.log(body);
  let produceGoodsData = []
  for (let i = 0; i < 2; i++) {
    let goodsObject = {
      ...body
    }
    produceGoodsData.push(goodsObject)
  }
 
  return produceGoodsData
}
Mock.mock('/mock/goods','post', produceGoodsData) 

//src/mock/mock.js


// 引入mockjs
 import Mock from 'mockjs'
// 获取 mock.Random 对象
const Random = Mock.Random
// mock新闻数据，包括新闻标题title、内容content、创建时间createdTime
const produceNewsData = function () {
  let newsList = []
  for (let i = 0; i < 20; i++) {
    let newNewsObject = {
      title: Random.ctitle(), //  Random.ctitle( min, max ) 随机产生一个中文标题，长度默认在3-7之间
      content: Random.cparagraph(), // Random.cparagraph(min, max) 随机生成一个中文段落，段落里的句子个数默认3-7个
      createdTime: Random.date() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；
    }
    newsList.push(newNewsObject)
  }
 
  return newsList
}

// 请求该url，就可以返回newsList
Mock.mock('/mock/news',  produceNewsData) // 后面讲这个api的使用细节

在vite或者webpack环境下都可以批量导入模块，方式有点区别，我这里是vite环境的方式，不用手动一个一个导入了，是不是很方便

// 批量导入mock模块
let mockMoudles = []
const modules = import.meta.globEager('./*.js');
console.log(modules);
Object.keys(modules).forEach(i => {
  mockMoudles.push(i)
})
export default mockMoudles

5、在main.js入口文件中导入

import { createApp } from 'vue'
import App from './App.vue'
import './mock/index.js'
// ​创建vue实例
const app = createApp(App)

6、测试接口

//app.vue

import { getNewsList, getGoodsList } from '@/api/user/index'

// mock数据
const handleMock = async() => {
	let data = await getGoodsList({name:'tom'})
	console.log(data);
	
}

<h1 @click="handleMock">Mock</h1>

这样就OK了