一个报错深刻理解axios传参和mock拦截（外加正则表达式）-526互联

前言：事情是这样的，在使用axios二次封装和mock进行拦截的时候，不是参数传递方式不正确就是找不到后端接口，为此我茶不思饭不想把axios和mock好好看了一遍，最后除了这些问题，发现是输在了正则表达式上面，找出错误的时候自己都懵了

axioa传参问题

总所周知，我们在平时使用axios的时候是这样写：
axios.get('url',{ params:{ param1:value1, param2:value2})
这样的话我们向url这个后端接口请求数据，并传递参数，此时我们应该知道的是使用params进行传参，后面的参数会自动拼接到url后面，类似于这样
url?param1=value1&param2=value2，
导致我们请求的后端的接口地址不正确（特别是用Mock.mock进行拦截的时候显示404 Not Found）

而我们在使用post中的data进行传参的时候（一般get是用params，而post是用data进行传参），这个参数并不会拼接到url后面，而是作为config配置项中的body参数，（在后面封装的时候有更好的体现）

这就是不同传递参数之间的不同

axios二次封装以及结合mock拦截

比如在使用params进行传参的时候，

点击查看代码

	getUserData (params) {
		console.log('api.js中', params)
		/**{
			total: 0,
			page: 1,
			name: "",
		} */
		return request({
			url: '/user/getUser',
			method: 'get',
			// 这个mock如果是true的话 用的就是线上fastmock的数据
			mock: false,
			params: params
			// data:{total: 0,page: 1,}
		})
	},

使用mock拦截

点击查看代码

Mock.mock(/user\/getUser/, 'get', userApi.getUserList)
//当拦截到匹配url的ajax请求的时候，立即调用后面的函数返回模拟的数据

这里讲一个很致命的问题

就是正则表达式的问题：因为之前说了，因为之前因为传参不同导致url不同，而这个如果你是用'/user/getUser'的话意味着mock只会拦截这个url，而因为传参或者baseURL或者mock的原因，就会导致你拦截不到这个url，所以使用正则表达式来进行匹配，（因为不是真正的后端接口，你如果使用data进行传参，并且将baseURL来设置成你想要的地址，拿到的url也可能不会进行拦截，所以这里更稳妥的方式就是使用正则表达式来进行匹配，并且不用管你的baseURL设置成什么样子）

因为传递参数不同如何将参数进行提取的问题

首先讲params进行传参，我们已经知道参数会被拼接到url后面，使用mock拦截的时候执行后面的函数，传递给函数一个config形参，在这种情况下，我么可以拿到config里面的url属性（接口地址与参数进行拼接之后），然后写一个函数将后面的参数进行提取

点击查看代码

/ get请求从config.url获取参数，post从config.body中获取参数
function param2Obj (url) {
	//提取url字符串的参数
	//比如：https://example.com?keyword=apple&page=1
	//search就是后面的参数
	const search = url.split('?')[1]
	if (!search) {
		return {}
	}
	//将 URL 编码的查询参数字符串解析为一个 JavaScript 对象，方便进一步处理
	//{keyword:apple,page:1}
	//decodeURIComponent主要用于解码整个URL或URL组件中经过编码的部分
	return JSON.parse(
		'{"' +
		decodeURIComponent(search)
			.replace(/"/g, '\\"')
			.replace(/&/g, '","')
			.replace(/=/g, '":"') +
		'"}'
	)
}

最后得到的就是一个参数构成的对象

之后是data进行传参，我们拿到的是config中的body属性（一个JSON格式的对象字符串），想要拿到参数只需要使用JSON.parse方法将JSON格式的对象字符串转化为一个对象即可