在uniapp开发过程中，合理封装网络请求是提高代码质量和开发效率的关键。本文将介绍一种更为优雅的封装方式，通过创建一个request实例来管理不同类型的HTTP请求。
一、准备工作
在开始封装之前，请确保你的项目中已经安装了uniapp开发环境，并且具备以下基础知识：
- 熟悉JavaScript基本语法
- 了解uniapp的基本用法
- 理解Promise的使用
二、封装request实例
1、创建一个request.js文件
在项目的common目录下（如果没有，请自行创建），新建一个request.js文件。
2、初始化instance对象和methods数组
在request.js文件中，我们首先定义一个instance对象和一个包含所有HTTP方法的methods数组：
javascript
const instance = {};
const methods = ['OPTIONS', 'GET', 'HEAD', 'POST', 'PUT', 'DELETE', 'TRACE', 'CONNECT']; // 请求方法数组3、 循环methods数组，为每种HTTP方法创建一个函数
接下来，我们遍历methods数组，为每种HTTP方法创建一个对应的函数，并将其挂载到instance对象上：
javascript
methods.forEach(item => {
instance[item.toLocaleLowerCase()] = (url, data = {}, config = {}) => {
return new Promise((resolve, reject) => {
// 开始封装uniapp的request方法
uni.request({
url: config.baseUrl ? config.baseUrl + url : url,
method: item,
data: data,
header: config.header || {
'content-type': 'application/json'
},
timeout: config.timeout || 60000, // 默认超时时间60秒
success: (res) => {
if (res.statusCode === 200) {
resolve(res.data);
} else {
reject(res);
}
},
fail: (err) => {
reject(err);
}
});
});
};
});4、添加默认配置
我们可以为instance对象添加一个setDefaultConfig方法，用于设置默认配置：
javascript
instance.setDefaultConfig = (config) => {
instance.defaultConfig = config;
};
// 默认配置示例
instance.setDefaultConfig({
baseUrl: 'https://api.example.com',
timeout: 60000,
header: {
'Authorization': 'Bearer your-token'
}
});5、导出instance对象
最后，我们将instance对象导出，以便在其他文件中使用：
javascript
export default instance;
三、使用封装后的request实例
1、引入request实例
在需要使用网络请求的页面或组件中，引入request.js文件：
javascript
import request from '@/common/request.js';2、发起请求
以下是一个示例，展示如何使用封装后的request实例发起GET请求：
javascript
request.get('/user/info', { userId: 123 }, request.defaultConfig).then((res) => {
console.log(res);
}).catch((err) => {
console.error(err);
});
四、总结
通过以上步骤，我们成功地在uniapp中封装了一个request实例，它支持所有常见的HTTP方法，并且可以通过setDefaultConfig方法设置全局默认配置。这种封装方式不仅使代码更加整洁，还提高了网络请求的管理效率。希望本文能帮助你在uniapp项目中更好地处理网络请求。
