打造精简高效的 uni-app 网络请求工具

在 uni-app 开发中，网络请求是连接前端与后端的核心桥梁。一个设计良好的请求工具能够显著提升开发效率，减少重复代码。本文将分享一个精简版的 uni-app 网络请求工具实现，它保留了核心功能同时保持了足够的灵活性。

设计思路

一个优秀的网络请求工具应当具备以下特点：

配置集中管理，便于维护
支持常用的 GET 和 POST 请求
自动处理基础 URL 拼接
统一的加载状态管理
简洁的错误处理机制
可扩展性强

基于以上原则，我们实现了一个轻量级但功能完备的网络请求工具。

实现代码解析

基础配置

首先，我们定义了请求的基础配置，包括基础 URL、请求头、超时设置等：

复制代码

config: {
  baseURL: setting.IS_DEV ? setting.DEV_URL : setting.PRO_URL,
  header: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
  dataType: "json",
  responseType: "text",
  // 条件编译，针对不同平台设置超时
  // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
  timeout: setting.TIMEOUT,
  // #endif
  // 其他平台特定配置...
}

这里使用了 uni-app 的条件编译特性，为不同平台设置了合适的参数，体现了跨平台开发的特点。

加载状态管理

为了提供良好的用户体验，我们实现了加载状态的自动管理：

复制代码

/**
 * 显示无文字的转圈加载动画
 */
showLoading() {
  uni.showLoading({
    title: '', // 空文字，仅显示图标
    mask: true, // 透明蒙层防止操作穿透
    icon: 'loading'
  });
},

/**
 * 隐藏加载动画
 */
hideLoading() {
  uni.hideLoading();
},

这种设计可以避免在每个请求前后手动调用加载动画，减少了重复代码。

请求方法封装

我们分别封装了 GET 和 POST 方法，让 API 调用更加直观：

复制代码

/**
 * 发送GET请求
 * @param {string} url - 请求地址
 * @param {object} data - 请求参数
 * @param {object} options - 额外配置项
 * @returns {Promise}
 */
get(url, data, options) {
  return this.request({
    ...options,
    url,
    data,
    method: 'GET'
  });
},

/**
 * 发送POST请求
 * @param {string} url - 请求地址
 * @param {object} data - 请求参数
 * @param {object} options - 额外配置项
 * @returns {Promise}
 */
post(url, data, options) {
  return this.request({
    ...options,
    url,
    data,
    method: 'POST',
    header: {
      ...options?.header,
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
},

POST 方法特别设置了适合表单提交的 Content-Type，同时保留了配置项的灵活性。

核心请求逻辑

request 方法是整个工具的核心，负责处理实际的网络请求：

复制代码

request(options) {
  // 合并配置
  const config = {
    ...this.config,
    ...options
  };
  config.header = {
    ...this.config.header,
    ...options.header
  };

  // 处理请求URL
  config.url = config.baseURL + config.url;
  
  // 添加token
  const token = uni.getStorageSync('token') || '';
  if (token) {
    config.header.Authorization = `Bearer ${token}`;
  }
  
  this.showLoading();
  return new Promise((resolve, reject) => {
    uni.request(config)
      .then(([err, res]) => {
        this.hideLoading();
        if (err) {
          return reject(err);
        }
        
        // 检查返回数据中的code值
        if (res.data && res.data.code !== 200) {
          const error = new Error(`请求错误，错误码: ${res.data.code}`);
          error.code = res.data.code;
          error.response = res;
          return reject(error);
        }
        
        resolve(res);
      })
      .catch(error => {
        this.hideLoading(); 
        reject(error);
      });
  });
}

这段代码实现了几个关键功能：

配置合并，允许全局配置与单次请求配置结合
URL 自动拼接，无需在每次请求时手动拼接基础 URL
Token 自动附加，简化身份验证流程
统一的错误处理，当返回 code 不等于 200 时视为失败
自动管理加载状态，请求开始时显示，结束时隐藏

使用示例

使用这个工具非常简单，只需导入后直接调用即可：

复制代码

import request from '@/utils/request.js';

// 发送GET请求
async function fetchData() {
  try {
    const res = await request.get('/api/data', { id: 1 });
    console.log('数据获取成功', res.data);
  } catch (error) {
    console.error('数据获取失败', error);
  }
}

// 发送POST请求
async function submitForm(formData) {
  try {
    const res = await request.post('/api/submit', formData);
    console.log('提交成功', res.data);
  } catch (error) {
    console.error('提交失败', error);
  }
}

总结

本文介绍了一个精简版的 uni-app 网络请求工具，它具有以下特点：

简洁高效：保留核心功能，去除冗余代码，让请求逻辑更加清晰
易用性强：封装了 GET 和 POST 方法，API 设计直观，降低使用门槛
统一管理：集中处理 URL 拼接、加载状态、Token 附加等共性逻辑
错误处理：当返回 code 不等于 200 时统一视为失败，简化错误处理流程
跨平台兼容：利用 uni-app 的条件编译特性，适配不同平台的特性

这个工具可以作为项目的基础网络层，根据实际需求进行扩展。例如，可以添加请求拦截器、响应拦截器、错误重试等功能，使其更加强大。

通过封装网络请求，我们可以在项目中实现代码复用，减少重复劳动，同时也便于后期维护和功能扩展。这种设计思想不仅适用于 uni-app，也可以应用于其他前端框架的网络请求处理中。