开发项目中,还没有后端接口时,可以使用axios的请求拦截器和响应拦截器,在请求发送到服务器之前或响应返回到客户端之前进行干预。
拦截后使用mockjs模拟后端接口,自己可以定义一些返回数据,实现数据的交互。
一、安装
npm install axios mockjs
二、请求拦截器
// 引入axios
import axios from 'axios'
// 创建axios实例
const http = axios.create({
baseURL: '/api', // 通用请求的地址前缀
timeout: 10000, //超时时间
})
//设置请求拦截器
http.interceptors.request.use(function (config) {
console.log("请求拦截器成功") //condig是配置对象
return config;
}, function (error) {
console.log("请求拦截器失败")
return Promise.reject(error);
});
//设置响应拦截器
http.interceptors.response.use(function (response) {
console.log("响应拦截器成功") //response是响应结果
return response;
}, function (error) {
console.log("响应拦截器失败")
return Promise.reject(error);
});
export default http
三、使用mockjs
创建mock目录,定义mock主文件index.js,并在该文件中存放mock数据,在main.js引入mock文件。
import './api/mock'
// 引入Mock
import Mock from 'mockjs'
import homeApi from './mockServeData/home'
import user from "./mockServeData/user"
import permission from "./mockServeData/permission";
// 定义请求拦截
// Mock.mock( url, type, template)
// 第一个参数 url 为请求路径,
// 第二个参数 type 为请求类型 如:get、popst、delete、put 等,默认为get
// 第三个参数是生成的数据,作为响应数据返回。可以为对象,也可以为函数,函数需要return
Mock.mock('/api/home/getData', 'get', {
// 属性 list 的值是一个数组,随机生成 1 到 10 个元素
"list|1-10": [
{
// 随机生成一个常见的英文名
"firstName": Random.first(), // "Michelle"
"firstName2": '@first()', // "Jose"
// 随机生成一个常见的英文姓。
"lastName": Random.last(), // "Taylor"
"lastName2": '@last()', // "Clark"
// 随机生成一个常见的英文姓名。括号里的布尔值,指示是否生成中间名(可选)。
"name": Random.name(true), // "Donald Eric Jackson"
"name2": '@name(true)', // "Donald Eric Jackson"
// 随机生成一个常见的中文姓
"cfirstName": Random.cfirst(), // "任"
"cfirstName2": '@cfirst()', // "郭"
// 随机生成一个常见的中文名。
"clastName": Random.clast(), // "芳"
"clastName2": '@clast()', // "芳"
// 随机生成一个常见的中文姓名。
"cname": Random.cname(), // "程强"
"cname2": '@cname()', // "程强"
// 随机生成颜色,格式为 '#RRGGBB'。
"color": Random.color(), // "#94f279"
"color2": '@color()', // "#94f279"
// 生成随机邮箱地址 可以指定域名,例如 163.com
"email": Random.email('163.com'), // "l.fvilfpz@163.com"
"email2": '@email()', // "l.fvilfpz@163.com"
// 返回一个随机的布尔值。
"boolean": Random.boolean(), // true
"boolean2": '@boolean()', // true
// 生成 0-100 随机整数
"point": Random.integer(0, 100), // 69
"point2": '@integer(60, 100)', // 98
// 生成一个浮点数,整数部分大于等于 1、小于等于 100,小数部分保留 1 到 3 位。
"floatNumber": Random.float(1, 100, 1, 3), // 60.695
"floatNumber2": '@float(1, 100, 3, 5)', // 19.29368
// 随机日期
"date": Random.datetime('yyyy-MM-dd'), // "2017-05-01"
"date2": "@datetime()", // "1973-06-12 13:05:18"
// 随机时间
"time": Random.time(), // "21:33:01"
"time2": "@time()", // "21:33:01"
// 当前日期
"now": Random.now('year'), // "2023-01-01 00:00:00"
"now2": "@now('year')", // "2023-01-01 00:00:00"
// 生成随机字符串 长度为 5
"string": Random.string(5), // "jPXEu"
"string2": '@string(5)', // "jPXEu"
// 随机生成一个(中国)大区。
"region": Random.region(), // "华北"
"region2": '@region()', // "华北"
// 随机生成一个(中国)省(或直辖市、自治区、特别行政区)。
"province": Random.province(), // "澳门特别行政区"
"province2": '@province()', // "澳门特别行政区"
// 随机生成一个(中国)市。括号里的布尔值,指是否生成所属的省(可选)
"city": Random.city(true), // "广东省 肇庆市"
"city2": '@city()', // "广东省 肇庆市"
// 随机生成一个(中国)县。括号里的布尔值,指是否生成所属的省、市(可选)
"county": Random.county(true), // "江苏省 常州市 其它区"
"county2": '@county()', // "江苏省 常州市 其它区"
// 随机生成一个邮政编码(六位数字)。
"zip": Random.zip(), // "806124"
"zip2": '@zip()', // "806124"
// 从数组中随机选取一个元素并返回。
"pick": Random.pick(['a', 'e', 'i', 'o', 'u']), // "e"
"pick2": '@pick(["a", "e", "i", "o", "u"])', // "e"
// 随机生成一个 18 位身份证。
"id": Random.id(), // 112.127.151.37
"id2": '@id()' // 97.46.129.222
}
]
})