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项目中更好地处理网络请求。