uniapp进阶技巧：如何优雅地封装request实例

在uniapp开发过程中，合理封装网络请求是提高代码质量和开发效率的关键。本文将介绍一种更为优雅的封装方式，通过创建一个request实例来管理不同类型的HTTP请求。

一、准备工作

在开始封装之前，请确保你的项目中已经安装了uniapp开发环境，并且具备以下基础知识：

1. 熟悉JavaScript基本语法
2. 了解uniapp的基本用法
3. 理解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项目中更好地处理网络请求。