vue中Mock及Axios-Mock-Adapter模拟调试器的使用

1. 首先在vue项目中安装axios&mockjs&Axios-Mock-Adapter
   axios官网
   mock官网
   axios-mock-adapter

使用npm安装
npm i axios  // 安装axios
npm i mockjs // 安装mockjs
（通过mock模拟假数据)
npm i axios-mock-adapter --save-dev //安装...你懂的
(axios-mock-adapte 即axios的模拟调试器，通过axios模拟调用后台)

2. 文件目录

3. 各文件中的内容
   (a)首先在mockdata/user文件中模拟一组假数据

import Mock from 'mockjs';

const Users = [];

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

（b）mock中内容

**mock.js**

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

     import { Users } from '../mockdata/user.js'

     let _Users = Users;

     export default {
	 bootstrap() {
		let mock = new MockAdapter(axios);
		 
		mock.onGet('/user/list').reply(config => {
		
			return new Promise((resolve, reject) => {
				//resolve() 响应Promise 对象的状态, 从 未完成 变为成功 可传递成功的处理函数
				//reject()  响应Promise 对象的状态, 从 未完成 变为失败 可传递失败的处理函数
				setTimeout(() => {
					resolve([200, {
						msg: '请求成功',
						users: _Users,
						config: config.params
					}])
				},1000 )
			})
		})
	}
};

**index.js**

   import mock from './mock.js';
   export default mock;

(c ) api 文件

api.js
   
  import axios from 'axios'
  //主端口
  let base = '';
  export const getUserList = params => {return axios.get(`${base}/user/list`,{ params: params }) }
  //在调用getUserList()方法时,会向url发起get请求,并传递params作为本次axios请求配置
  
index.js

 import * as api from './api';
 export default api;

(d) 在组件中的使用

    methods:{
			getData() {
				console.log("点击了button")
				getUserList({id:1}) .then((res) => {
					console.log(res)
				})
			}
		}

4. 这时当你发现一个神奇的现象时，请不要慌张

因为它请求成功了！