数据模拟mockjs

1. mockjs安装

cnpm install mockjs

2. 在src下创建mock文件夹，创建json数据文件和.js文件

WeChat68e65a21c511f5b76fa843feaee7aaf8.png

mockServe.js文件

import Mock from "mockjs";
import banner from "./banner.json";

//mock数据:第一个参数请求地址   第二个参数：请求数据
Mock.mock("/mock/banner",{code:200,data:banner});

3. main.js中引入mockServe.js

// 引入mockServe.js
import "@/mock/mockServe";

4.axios封装请求mockRequest.js

// 对axios进行二次封装
import axios from "axios";
import nprogress from "nprogress";
import "nprogress/nprogress.css";

// 创建对象
let requests = axios.create({
    baseURL:"/mock",
    timeout:5000,
 });


 // 请求拦截
 requests.interceptors.request.use((config)=>{
     // config配置对象，重要属性header
     nprogress.start();
     return config;
 });

 // 响应拦截
 requests.interceptors.response.use((res)=>{
     // 成功响应函数
     nprogress.done();
    return res.data;
 },(error)=>{
     // 失败响应函数
     return Promise.reject(new Error("请求出错了"))
 });
 
 
 //对外暴露
 export default requests;

5.使用

import mockRequests from "./mockRequest";

export const reqGetBannerList = () => mockRequests.get("/banner");