Vue + Axios + Mock.js 模拟后台接口

1、安装axios 和 mock.js，方法如下：

npm install axios --save-dev  // 安装axios用于接口请求
npm install mockjs --save-dev  // 安装mock.js用于数据模拟

2、在vue项目的src文件夹下简历一个mock的文件夹，在里边存放模拟数据的js文件

3、然后需要在mock文件夹中 新建一个 mock.js（具体的创建数据的方法可以去看官网）

mock官网地址：http://mockjs.com/

在mock.js中添加如下代码：

import Mock from 'mockjs'
const Random = Mock.Random
/*** mock需要给三个参数，url（与axios请求时传的url一致，我这个是本地启动的项目就直接是本机IP）* 请求类型：get、post 等* 数据处理函数，函数需要return数据*/
Mock.mock('http://10.65.44.36:8080/test/city','get',() => {let citys = [];for (let i=0; i<10; i++) {let obj = {id: i + 1,city: Random.city(),color: Random.color()}citys.push(obj)}return { cityList: citys }
})

4、在main.js中引入全局mock.js

5、在组件中进行数据请求

methods:{getCity(){let params = {};api.cityList(params, 'get').then((res) => {console.log(res,'数据')})},
}

打印结果：

附加：如果请求的时候报这个错：

去看看你的 axios 请求拦截响应是不是 做了code判断 没有把 response 给 return 出来

如下：

/*** 全站http配置** axios参数说明* isSerialize是否开启form表单提交* isToken是否需要token*/
import axios from 'axios'
import { Message, Notification } from 'element-ui'
import { baseUrl } from '@/config/env';let request = axios.create({baseURL: baseUrl
});//HTTPresponse拦截
request.interceptors.response.use(res => {if(res.status === 654) { // 百度云请求超时检测Message({message: '请求超时！',type: 'warning'});}else if (res.status !== 200){Message({message: '数据返回有误',type: 'error'});return Promise.reject(res)}return res;
}, error => {console.log(error);return Promise.reject(error);
});export default request;