个人技术总结——uview-plus下的Http请求基本使用及相关使用
| 这个作业属于哪个课程 | 软件工程-23年春季学期 |
|---|---|
| 这个作业要求在哪里 | 软件工程实践总结&个人技术总结 |
| 这个作业的目标 | 个人技术总结 |
| 其他参考文献 | 构建之法、CSDN社区、uni-app官方文档、uview-plus官方文档 |
目录
-
- 一、写在前面
- 二、技术概述
-
- 2.1 什么情况下使用
- 2.2 学习原因
- 2.3 技术难点
- 三、技术详述
-
- 3.1 基本使用
- 3.2 全局配置
- 3.3 GET请求
- 3.4 POST请求
- 3.5 获取用户ID
- 四、技术使用中遇到的问题和解决过程
-
- 4.1 用户头像上传
- 五、总结
- 六、参考文献
一、写在前面
在本次团队项目中，我主要担任了前端开发人员，学习使用了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官方文档