vue-cli3 下通过 axios-mock-adapter 模拟接口，以及通过 mockjs 模拟数据

在前端开发中，我们总是需要模拟请求或者数据来做一些简单的调试，或者验证逻辑代码，下面我将用「axios-mock-adapter」插件来模拟请求

首先我们先用「vue-cli3」创建一个项目「axios-mock」，按默认配置，回车就行。vue-cli3

vue create axios-mock

进入目录，执行命令，引入插件「axios」和「axios-mock-adapter」：

npm i -D axios axios-mock-adapter

// 或者

yarn add axios axios-mock-adapter

打开目录，在「main.js」中引入「axios」，我们用它来请求资源。

import axios from 'axios'

// 同时设置全局 $axios 对象，这样就不用多次引用 axios 了

Vue.prototype.$axios = axios

在 src 目录下新建 mock 目录，然后新建 index.js 和 service.js 两个文件，service.js 内容如下

import MockAdapter from 'axios-mock-adapter'
import axios from 'axios'

export default {

    bootstrap () {

        var mock = new MockAdapter(axios)
    
        mock.onGet('/users').reply(200, { // 200 为状态码，后面对象为返回data
        
            users: [
                {id: 1, name: 'axios'}
            ]
        })
    }

}

index.js 内容如下

import mock from './service'

export default mock

接下来我们要在 main.js 中执行 mock

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import mock from './mock'

mock.bootstrap()

Vue.config.productionTip = false
Vue.prototype.$axios = axios

new Vue({
  render: h => h(App),
}).$mount('#app')

最后我们写一个按钮请求接口来进行测试：

<button @click="getUser">mock-adapter</button>

methods: {
    getUser () {
      this.$axios.get('/users').then(res => {
        console.log(res);
      })
    }
  }

在控制台中我们可以看到如下信息，说明我们模拟请求成功返回数据

 

 如果我们想生成随机数据的话，可以引入「mockjs」

npm i -D mockjs

// 或者

yarn add mockjs

在「mock」目录下新建「data」目录，并新建「user.js」文件，文件内容如下:

import Mock from 'mockjs'

const Users = []

// guid cname date integer 都是 mock 中生成对应类型数据的函数

for (let i = 0; i < 80; i++) {
    Users.push(Mock.mock({
        id: Mock.Random.guid(),
        name: Mock.Random.cname(),
        addr: Mock.mock('@county(true)'),
        'age|18-60': 1,
        birth: Mock.Random.date(),
        sex: Mock.Random.integer(0, 1)
    }))
}
export { Users }

接下来改造下「service.js」

import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'
import { Users } from './data/user'

export default {
    bootstrap () {
        var mock = new MockAdapter(axios)

        mock.onGet('/users').reply(200, {
            // users: [
            //     {id: 1, name: 'axios'}
            // ]
            Users
        })
    }
}

返回结果如下：

 总结：「mockjs」中还有别的产生随机数据的方法，「axios-mock-adapter」中也可以用 onPost 方法，具体大家可以去查看mockjs 和 axios-mock-adapter

下面附上项目目录 和 GitHub 地址 github