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

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

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

1、意外发现

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

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>

页面样式

3、比较结果

1、浏览器端调试

package org.apache.coyote;
public final class Request {}

在Request类中打上断点，可以看到Header中的所有参数，复现了当初放弃使用request时的状况。

这里只看到了 access-control-request-method和access-control-request-headers字段，以及代码中自定义的key值作为access-control-request-headers字段的value值。

2、HBuilder内置浏览器调试

那么在HBuilder内置浏览器调试会出现什么情况呢？


从结果可以看到 headers中没有了 access-control-request-method和access-control-request-headers字段，而多出了代码自定义的字段。

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

4、总结

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