Uniapp（Vue2）Api请求封装

一、目录

复制代码

├── api                # 业务接口目录
│   └── api.js         # 所有请求接口汇总
└── utils              # 工具目录
    └── request.js     # 网络请求核心封装

二、API封装

1、request

复制代码

// utils/request.js
/**
 * 网络请求核心函数（直接硬编码基础域名）
 * @param {Object} options - 请求配置（url、method、data等）
 * @returns {Promise} - 请求结果Promise
 */
function request(options = {}) {
  // 基础域名
  const baseUrl = 'http://localhost:8080'; // 替换为你的后端固定域名
  
  // 1. 拼接完整请求地址
  options.url = `${baseUrl}${options.url}`;

  // 2. 设置默认请求头（JSON格式）
  options.header = {
    'content-type': 'application/json',
    ...options.header // 允许自定义请求头
  };

  // 3. 处理请求结果
  return new Promise((resolve, reject) => {
    // 成功回调
    options.success = (res) => {
      // 按后端约定，code=200为成功（需根据实际调整）
      if (res.data.code !== 200) {
        uni.showToast({
          icon: 'none',
          duration: 3000,
          title: res.data.msg || '请求失败'
        });
        reject(res.data);
        return;
      }
      resolve(res.data.data); // 返回核心数据
    };

    // 失败回调（网络错误等）
    options.fail = (err) => {
      uni.showToast({
        icon: 'none',
        duration: 3000,
        title: '网络异常，请重试'
      });
      reject(err);
    };

    // 发起请求
    uni.request(options);
  });
}

export default request;

2、api

直接集中管理所有业务请求，无需按模块拆分：

复制代码

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

// 示例1：获取用户列表
export function getAllList(params) {
  return request({
    url: '/api/users', // 接口路径（会拼接baseUrl）
    method: 'GET',
    params
  });
}

// 示例1：根据ID查询用户
export function getUserById(params) {
  return request({
    url: `/api/users/${params}`, // 接口路径（会拼接baseUrl）
    method: 'GET'
  });
}

// 示例2：新增用户
export function addUser(data) {
  return request({
    url: '/api/users',
    method: 'POST',
    data
  });
}

3、使用

4、最终效果

5、注意

为什么返回的不应该是以下这种格式吗？？？

原因：

在request中，有如下代码进行了响应处理，如果你需要可以直接根据需求进行修改resolve

总结：

目前是使用最简易的封装进行实现，如果需要精进可以基于此基础进行添加，如状态管理、拦截器等