关于使用get请求传递map的理解和示例

• 背景。ruoyi框架的pc端使用了这种方式，但小程序端与pc端用到的request不相同。调用接口报错。

• 处理后前端。对request请求拦截做处理，使用与pc端相同逻辑。transform是将对象中每一个字段值做拆解拼接成url参数，使用&分隔。

• 这是拦截request请求。给出了截图和js。
  

  const install = (Vue, vm) => {
  	Vue.prototype.$u.http.setConfig({
  		// baseUrl打包app时放开，h5模式下会和vue.config.js代理冲突，导致失效
  		baseUrl: config.baseUrl,
  
  	});
  	// 请求拦截，配置Token等参数
  	Vue.prototype.$u.http.interceptor.request = (config) => {
  		// console.log(2222, config)
  		// config.header.Token = vm.vuex_token;
  		//config.header.Token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9';
  		// 方式一，存放在vuex的token，假设使用了uView封装的vuex方式，见：https://uviewui.com/components/globalVariable.html
  		// 自定义token头
  
  		config.header.Authorization = `Bearer ${vm.$store.state.vuex_token}`;
  		console.log('authorization:', config.header.Authorization)
  		// 判断是否是get请求，若是对url进行判断是否含参数，若含参数对参数进行encodeURIComponent处理
  		// get请求映射params参数
  		if (config.method == 'GET' && config.params) {
  			let url = config.url + '?' + tansParams(config.params);
  			url = url.slice(0, -1);
  			config.params = {};
  			config.url = url;
  			console.log('get请求映射params参数:', config.url, config)
  		}
  		return config;
  	};
  

• 这里是transform方法。

• 下面是对get请求方法做改动，添加上了params参数。但要注意，params参数需要显示声明的赋值，不然config.option中params没有效果。
  

• 再往下就是get调用了。注意要有三个参数，第二个参数是data,这里没用，因为data是用于json请求体的。对于url参数不其起作用

• 总结。

  1. 排查出错原因
  2. 修改源码。请求拦截做处理。在url拼接参数
  3. 修改请求参数