个人技术总结——uview-plus下的Http请求基本使用及相关使用

这个作业属于哪个课程	软件工程-23年春季学期
这个作业要求在哪里	软件工程实践总结&个人技术总结
这个作业的目标	个人技术总结
其他参考文献	构建之法、CSDN社区、uni-app官方文档、uview-plus官方文档

一、写在前面

在本次团队项目中，我主要担任了前端开发人员，学习使用了uniapp应用框架，通过学习这个框架，学到了很多前端的通用知识。

二、技术概述

2.1 什么情况下使用

当客户端需要从服务端获取数据、发送数据、用户身份验证、更新数据、删除数据时，会用到Http请求。

2.2 学习原因

• Http请求对参数的处理比uniapp自带的uni.request更强
• Http请求基于Promise对象实现更简单的request使用方式，支持请求和响应拦截

2.3 技术难点

• 异步请求和回调处理：HTTP请求是异步的，这意味着在发送请求后，代码会继续执行而不会等待服务器响应。因此，需要了解如何正确处理HTTP请求的回调函数，以便在接收到响应后执行相应的操作。需要处理成功响应和错误响应的情况，并进行适当的错误处理和用户反馈。
• 请求拦截和响应拦截：uView-Plus提供了请求和响应拦截的功能，可以在发送请求之前和收到响应之后对请求和响应进行处理。了解如何使用拦截器来修改请求或响应的数据、添加请求头、处理错误等，可以提高开发的灵活性和控制力。

三、技术详述

3.1 基本使用

uni.$u.http.middleware(config)
uni.$u.http.request(config)
uni.$u.http.get(url[, config])    //常用
uni.$u.http.upload(url[, config])
uni.$u.http.delete(url[, data[, config]])
uni.$u.http.head(url[, data[, config]])
uni.$u.http.post(url[, data[, config]])  //常用
uni.$u.http.put(url[, data[, config]])
uni.$u.http.connect(url[, data[, config]])
uni.$u.http.options(url[, data[, config]])
uni.$u.http.trace(url[, data[, config]])

3.2 全局配置

可选的配置项如下：

{
    baseURL: '',
    header: {},
    method: 'GET',
    dataType: 'json',
    // #ifndef MP-ALIPAY
    responseType: 'text',
    // #endif
    // 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
    custom: {}, // 全局自定义参数默认值
    // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
    timeout: 60000,
    // #endif
    // #ifdef APP-PLUS
    sslVerify: true,
    // #endif
    // #ifdef H5
    // 跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+）
    withCredentials: false,
    // #endif
    // #ifdef APP-PLUS
    firstIpv4: false, // DNS解析时优先使用ipv4 仅 App-Android 支持 (HBuilderX 2.8.0+)
    // #endif
    // 局部优先级高于全局，返回当前请求的task,options。请勿在此处修改options。非必填
    // getTask: (task, options) => {
    // 相当于设置了请求超时时间500ms
    //   setTimeout(() => {
    //     task.abort()
    //   }, 500)
    // },
    // 全局自定义验证器。参数为statusCode 且必存在，不用判断空情况。
    validateStatus: (statusCode) => { // statusCode 必存在。此处示例为全局默认配置
        return statusCode >= 200 && statusCode < 300
    }
}

当然，也可以通过uni.$u.http.setConfig()方法进行全局配置，比如配置请求的全局域名baseUrl：

uni.$u.http.setConfig((config) => {
    /* config 为默认全局配置*/
    config.baseURL = `https://www.example.com`; /* 根域名 */
    return config
})

3.3 GET请求

注意，get请求与post请求略有不同，get请求所有参数都在方法的第二个参数中，而post请求的第二个参数为请求参数params，而第三个参数才为配置项。

// 基本用法，注意：get请求的参数以及配置项都在第二个参数中
uni.$u.http.get('/user/login', 
{params: {userName: 'name', password: '123456'}}).then(res => {

}).catch(err => {

})

上面的是基本用法，具体在项目中我是这样使用的：

3.4 POST请求

// 基本用法，注意：post的第三个参数才为配置项
uni.$u.http.post('/user/login',
 {userName: 'name', password: '123456'} ).then(res => {

}).catch(err => {

})

上面的是基本用法，具体在项目中我是这样使用的：

注意到，我在请求成功后的处理，调用了uni.showToast（），并让页面返回上一层，改善用户的交互体验，让用户知道自己干了什么？成功了吗？
使用this.timer来延迟执行函数时，要记得在页面卸载时清除定时器，否则在下一次使用时会出现严重Bug，具体来说：

3.5 获取用户ID

在实际开发一个App时，用户登录后，通常需要在每一个页面保持用户ID，并在需要的时候获取用户ID，一种可行的办法是使用uniapp的数据缓存来实现。

• uni.setStorage(OBJECT)

  将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
  
  示例：

  uni.setStorage({
  key: 'storage_key',
  data: 'hello',
  success: function () {
  	console.log('success');
  }
  });
  

  项目中：
  

• uni.getStorage(OBJECT)

  从本地缓存中异步获取指定 key 对应的内容。
  
  示例：

  uni.getStorage({
  key: 'storage_key',
  success: function (res) {
  	console.log(res.data);
  }
  });
  

  项目中：
  
  可以将获取到的this.id拼接到GET请求的服务端接口后。

四、技术使用中遇到的问题和解决过程

4.1 用户头像上传

• 问题描述：

将图片的URL （如：https://www.example.com/images/pic.jpg?size=medium&format=jpeg） 上传至数据库中存储，在GET请求后，可以正常根据URL渲染出图片，但是用户在实际使用App的时候往往希望选择存储在本地 (例如相册) 的图片作为自己的头像，这时候根本就没有图片的URL，在GET请求后，更不可能渲染出图片。

• 问题解决

通过uniapp自带的uni.chooseImage()获取图片的文件路径 >>>使用 pathToBase64（）函数将本地文件路径转换为Base64编码>>>将该Base64编码上传到图床接口中>>>获取返回的URL>>>将该URL存储到数据库中
具体来说，请看代码:

async changeHead() {
				var _this = this;

				const res = await new Promise((resolve, reject) => {
					uni.chooseImage({
						count: 1, // 选择图片的数量，这里选择1张
						sourceType: ['album'], // 选择图片的来源，这里选择相册
						success: resolve,
						fail: reject,
					});
				});
				// 从返回结果中获取选中的图片文件路径
				const imagePath = res.tempFilePaths[0];

				//将文件路径转换为Base64编码
				const res1 = pathToBase64(imagePath)
					.then(base64 => {
						var s = base64.substr(base64.indexOf(',') + 1, base64.length);
						//图床的API可以在网上自己找一找，有免费的也有付费的
						uni.$u.http.post('图床API', {//根据找到的图床参数说明来传递参数
							token: '',
							b64_data: s,
						}).then(res => {
							console.log("图片上传成功");
							console.log(res.data.url);
							//将返回的URL存储到本地一个字段中，以便后续上传到数据库使用
							_this.user.avatarUrl = res.data.url
						}).catch(error => {
							console.log(error);
							console.log("失败")
						})
					}).catch(error => {
						console.error(error)
					})
	}

五、总结

uView-Plus提供了便捷的HTTP请求功能，使得在UniApp中进行与服务器的数据交互变得简单。通过uView-Plus的HTTP请求模块，可以轻松地发送GET、POST、PUT、PATCH和DELETE请求，并处理请求的参数、头部、请求体等。它还支持请求和响应拦截器，方便对请求和响应进行处理和修改。此外，uView-Plus的HTTP请求还提供了文件上传和下载的功能，并且可以处理跨域请求。通过学习和掌握uView-Plus的HTTP请求，开发者能够更方便地与服务器进行数据交互，并处理各种常见的网络请求需求。
在使用HTTP请求时，可能还会遇到各种各样的问题，这要求我们要善于发现问题和通过查询资料、文献等解决问题。

六、参考文献

• uni-app官方文档
• uview-plus官方文档