当前位置：首页 > ops >正文

Uniapp（Vue2）Api请求封装

ops 2025/8/27 6:50:04

一、目录

├── 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});
}