uni-app开发日志[20220513]：官方、第三方API开发问题（vue3版本为主）

解决uni.request()内调用this失效的两种方法

两种解决方法：

1. 使用箭头函数（箭头函数内没有this，所以使用 this 时其实是父层的 this）
2. 外层定义 let that=this ，这样在uni.request()内部使用that来代替this即可

<template>
    <view>
        <view>{{title}}</view>
    </view>
</template>
<script>
    export default {
		data(){
			return {
				title : "标题"
			}
		},
		methods: {
			post(){
				uni.request({
					url: "xxx.html",
					data: {},
					method:"POST",
					header : {"content-type":"application/x-www-form-urlencoded;charset=utf-8"},
					success : ()=> {
						this.title == "正常"; //正常
						return;
					},
					fail () { 		
						this.title == "无效"; //无效				
						return;
					},
					complete : function() {
						this.title == "无效"; //无效
						return;
					}
				});
			}
		}
	}
</script>

uniapp踩坑：this的指向问题导致无法正确修改数据

---

uni.uploadFile()上传失败及uni.request()参数失败

1.uni.uploadFile()

如果设置了头部参数，例如：header:{'Content-Type': "multipart/form-data"}，那么在h5模式下将会出错。

如果不设置，在浏览器里的值为：Content-Type:multipart/form-data; boundary=----WebKitFormCoundaryzya7MjtVluBecaQ2，后面多了boundary，这是必要的，给服务器分割使用。
但如果你自己设置这个Content-Type参数，那就相当于强行把boundary这个值给去掉了，自然服务器就报错了。

根据网友提示，app里需要自定义设置，还需研究：uni.uploadFile接口使用问题

// #ifdef H5
return this.uploadHeader;
// #endif				
// #ifndef H5
return Object.assign({'Content-Type': "multipart/form-data"},this.uploadHeader);
// #endif

2.uni.request()

根据这个问题引出uni.request()如果要传参数给服务器，则必须设置头参数：
{'Content-Type': "application/x-www-form-urlencoded;charset=utf-8"}
否则uniapp的默认设置为json，可能不符合服务器接收要求。

---

uni.request()用法，举例header里发送数据由php接收

uniapp：uni-app发起网络请求

uni.request({
    url: '', 
    data: {},
    method:"POST",
    header: {
        'token': 'aabbcc' //请求头信息
    },
    success:function(res){},
    fail:()=>{},
	complete:()=>{}
});

php：PHP获取请求header以及body里的值

//如果header里放入的值为token，到header里会自动加上HTTP_，并且转化为大写，取值时如下
$token = $_SERVER['HTTP_TOKEN'];

如果要自己封装，可以参考：uniapp的请求封装（含post ,get,put ,delete）

---