Mock 之搭建本地 MockJs

一、目的

模拟后端接口

二、发请求

1. install

npm install axios

2. 配置

import axios from 'axios'; // axios 导入包

const service = axios.create({}); // axios 简单配置

// /api/user/id    token
service.interceptors.request.use(
        config => {
            return config
        }
    ) // axios 请求拦截

service.interceptors.response.use(
        response => {
            const { data } = response
            // if (data.status == 200) {

            // } else if (data.status == 403) {

            // }
            return data;
        }
    ) // axios响应拦截

export default service

• axios官网.

3. 对接口发起请求

import request from '@/utils/request'

export const getUsers = () => request({
    url: '/api/users',
    method: 'get'
})

• axios发起请求的代码都维护在api下。

三、Mock模拟响应

1. install

npm install mockjs

2. 配置

import Mock from 'mockjs'

// example 相关
Mock.mock(
    '/api/users',
    'get',
    function() {
        return Mock.mock({
            "status": "200",
            "msg": "请求成功",
            "data|3": [{
                "name": "@cname", // Mock.Random.cname(),
                "age": "@integer(20,50)"
            }]
        })
    }
)

• MockJS官网.
• MockJs github 官网文档.

3. 把 mock 导入main.js

导入才会执行，数据才会成功。

import '@/mock'

四、请求成功且 mock 成功

1. About.vue

<template>
    <!-- axios & mock-验证 -->
    <div v-for="(item) in list" :key="item.name">
        <span>{{item.name}}</span>
        <span>{{item.age}}</span>
    </div>
</template>

<script>
import { getUsers } from '@/api'
import { onMounted, reactive, toRefs } from 'vue'
export default {
    setup(){
        const data = reactive({
            list: []
        })

        onMounted(()=>{

            getUsers().then(res=>{
                console.log(res)
                data.list = res.data
            })

        })

        const dataAsRefs = toRefs(data)

        return dataAsRefs
    }
}
</script>

五、优化 mock 代码

1. example 模块化

import Mock from 'mockjs'

export default {

    getUsers: () => {
        return Mock.mock({
            "status": "200",
            "msg": "请求成功",
            "data|3": [{
                "name": "@cname", // Mock.Random.cname(),
                "age": "@integer(20,50)"
            }]
        })
    }
}

2. mock 入口文件配置

import Mock from 'mockjs'
import example from './example'

// example 相关
Mock.mock('/api/users', 'get', example.getUsers)

export default Mock;