mockjs 的使用

mockjs 的使用

概念：自娱自乐的发送请求，因为 mock 自己存储数据，然后又发送请求从 mock 读取数据。发送请求还是和 ajax 一致。就安装下面的教程来，完全不用跨域和处理 http 域名前缀什么的！

安装：npm i mockjs -D

1、创建 mock 文件夹，存储 json 数据 和 mockServe.js （json 数据：自己模拟的，不是从服务器里获取）

banner.json：（轮播图数据）

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

2、mockServe.js：mock 服务器，设置响应体，就用自己写的数据

import Mock from 'mockjs'

// 引入 json 数据
import banner from './banner.json'

// 设置响应
Mock.mock('/mock/banner',{
    data: banner,    
})

3、去 main.js 里面激活一下 mock 服务

import '@/mock/mockServe'

4、在 mock 文件夹，新建 mockRequests.js

mockRequests.js

// mockRequests：mock 的 ajax 封装

import axios from 'axios';

// 进度条
import nprogress from 'nprogress'
import 'nprogress/nprogress.css';

const mockRequests = axios.create({

    //基础路径 请求url默认开头会加上baseURL
    baseURL: "/mock",
    
    //请求不能超过5S
    timeout: 5000,

});

//请求拦截器----在项目中发请求前执行的函数
mockRequests.interceptors.request.use(function(config) {

    // 加载进度条
    nprogress.start();

    return config;
})

//响应拦截器----当服务器响应请求后的回调函数
mockRequests.interceptors.response.use(
    // 成功回调
    function(res) {
        // 进度条结束
        nprogress.done();

        // 直接返回响应体的 data 作为 promise对象 的value
        return res.data
    },

    // 失败回调
    function(err) {
        nprogress.done();

        console.log('mock数据请求失败');
        return err;
    }
)

export default mockRequests;

5、进入 api/index.js 写 mock 请求函数

import mockRequests from './mockRequests'

// mock 接口
export const reqgetBannerList = function() {
    return mockRequests.get('/banner');
}

6、最后！在组件中发送 mock 请求，例如调用 reqgetBannerList 函数

import { reqgetBannerList } from '@/api'

async updataBannerList(context) {
    let result = await reqgetBannerList();

    if(result) {
        console.log(result.data)
    }
}