mock数据的模拟,以及如何请求Mock数据

安装mock包

# 安装
npm install mockjs

准备一个mock数据，注意这里的images需要放在vue的public文件夹下，不然请求的时候无法拿到数据

[
  {
          
   
    "id": "1",
    "imgUrl": "/images/banner1.jpg"
  },
  {
          
   
    "id": "2",
    "imgUrl": "/images/banner2.jpg"
  },
  {
          
   
    "id": "3",
    "imgUrl": "/images/banner3.jpg"
  },
  {
          
   
    "id": "4",
    "imgUrl": "/images/banner4.jpg"
  }
]

引入mock模块，提供接口

// 引入mock模块
import  Mock  from "mockjs";
import banner from ./banner.json



// Mock数据 模拟接口
Mock.mock("/mock/banner",{
          
   code:200,data:banner});

在main.js注册mock ，注意 我这里配置了@的src路径，你们直接./寻找路径就可以了

import @/mock/mockServe.js

封装一个mockAPI

import axios from "axios";
import nprogress from "nprogress";
// 引入进度条样式
import nprogress/nprogress.css
const baseURL = /mock;

const instance = axios.create({
          
   
  // 基础地址
  baseURL,
  // 默认超时的时间
  timeout: 5000
})

// 请求拦截
instance.interceptors.request.use(config => {
          
   
  // 拿到请求头
  // config.headers.token = localStorage.getItem(token)
  // 进度条开始动
  nprogress.start();


  return config
}, err => {
          
   
  // 打印错误值
  return Promise.reject(err)
})

// 响应拦截
instance.interceptors.response.use(
  res => {
          
   
    nprogress.done();
    return res
  },
  error => {
          
   
    if (error && error.response) {
          
   
      switch (error.response.status) {
          
   
        case 400:
          Message.error(400)
          break
        // 401: 未登录,跳转至登录页
        case 401:
          Message.error(401)
          break
        case 403:
          Message.error(403)
          break
        // 404请求不存在
        case 404:
          break
        case 500:
          // Message.error(服务器故障)
          break
        default:
          break
      }
      return Promise.reject(error.response)
    }
  }
)

// 整体导出
export default instance

请求接口即可

export const getBanner = () => mockReq.get(/banner)