uniapp学习日记之request自定义请求头

uniapp学习日记之request自定义请求头

在学习uniapp的过程中,由于笔者是从Vue项目转来学习uniapp,在使用uni.request时,发现在浏览器调试时,无法在请求头header中添加token字段,愤而弃之,便开始使用axios组件,事后细想后重读官网资料,发现了问题,并非request无法在请求头中自定义字段,而是笔者操作不当。

1、意外发现

当笔者细读OBJECT参数说明文档时,才发现犯了一个错误。处于个人习惯,喜欢在浏览器端调试程序,浏览器端属于是H5环境,自然也是无法修改header中的参数的,为了确定笔者的想法,于是乎决定做个对比。
uni.request(OBJECT) | uni-app官网
uniapp学习日记之request自定义请求头_第1张图片

2、编写测试页面

笔者这里只给出uniapp的代码,服务端创建一个SpringBoot项目并写一个过滤器获取请求头参数即可实现,这里就不再赘述。

<template>
	<view>
		<button type="primary" @click="request()">测试发送请求</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
			request() {
				uni.request({
				    url: 'http://127.0.0.1:7088/uniapp/test/token',
				    data: {
				        text: 'uni.request'
				    },
				    header: {
				        myToken: 'mytoken-uniapp',
				    },
				    success: (res) => {
				        console.log(res.data);
				        this.text = 'request success';
				    }
				});
			}
		}
	}
</script>

页面样式
uniapp学习日记之request自定义请求头_第2张图片

3、比较结果

1、浏览器端调试
package org.apache.coyote;
public final class Request {}

Request类中打上断点,可以看到Header中的所有参数,复现了当初放弃使用request时的状况。
uniapp学习日记之request自定义请求头_第3张图片
这里只看到了 access-control-request-methodaccess-control-request-headers字段,以及代码中自定义的key值作为access-control-request-headers字段的value值。

2、HBuilder内置浏览器调试

那么在HBuilder内置浏览器调试会出现什么情况呢?
uniapp学习日记之request自定义请求头_第4张图片
uniapp学习日记之request自定义请求头_第5张图片
从结果可以看到 headers中没有了 access-control-request-methodaccess-control-request-headers字段,而多出了代码自定义的字段。

这才是笔者想要的那种情况,也就是说uni.request支持自定义请求头字段,只是在H5调试环境下不支持,正常使用uniapp进行开发任务时,都是为了开发app或者小程序,自然也就不会出现H5环境而导致自定义请求头字段失效的情况。

4、总结

项目转型太匆忙,而面对新的框架容易囫囵吞枣,导致遗漏了诸多细节,导致在其他地方费了好大一番功夫,本次得到的经验是:在学习一个框架时,多花一些时间去看去想,而不是匆忙上手。

你可能感兴趣的:(uniapp学习之路,uni-app,学习,java)