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