请求后端接口全攻略：通用封装 + 请求拦截器，一篇就够！
在 UniApp 中与后端接口交互最常用的方式是 uni.request，但如果你每次都手动调用、拼地址、写 headers，会非常冗余、易错。
本文将手把手带你：
• 掌握 uni.request的基本用法• 封装通用请求方法 • 加入请求/响应拦截器（如 token 注入、统一错误处理）
uni.request 基础用法
uni.request({
url: 'https://api.example.com/user',
method: 'GET',
data: { id: 1 },
success: (res) => {
console.log('响应数据:', res.data)
},
fail: (err) => {
console.error('请求失败:', err)
}
})默认支持所有平台，包括 H5、小程序、App。
封装通用 request 方法
我们创建一个统一的 request.js 工具模块，集中处理：
• 基础 URL 拼接 • 请求方法封装（get/post 等） • token 注入（请求拦截器） • 状态码统一处理（响应拦截器）
文件目录结构推荐
├── utils/ │ └── request.js # 请求封装模块 ├── config/ │ └── index.js # 全局配置项，如 baseURL
config/index.js：配置项
export default {
baseURL: 'https://api.example.com',
timeout: 10000
} utils/request.js：通用封装
import config from '@/config/index.js'
import { get } from './storage.js' // 用于获取 token 等缓存
const request = (options = {}) => {
const {
url,
method = 'GET',
data = {},
headers = {}
} = options
return new Promise((resolve, reject) => {
uni.request({
url: config.baseURL + url,
method,
data,
timeout: config.timeout,
header: {
'Content-Type': 'application/json',
'Authorization': get('token') || '', // 请求拦截器：自动加 token
...headers
},
success: (res) => {
const { statusCode, data } = res
// 响应拦截器
if (statusCode === 200) {
resolve(data)
} else {
uni.showToast({ title: data.message || '请求错误', icon: 'none' })
reject(data)
}
},
fail: (err) => {
uni.showToast({ title: '网络异常', icon: 'none' })
reject(err)
}
})
})
}
// 快捷方法封装
export const getRequest = (url, data = {}) => request({ url, data, method: 'GET' })
export const postRequest = (url, data = {}) => request({ url, data, method: 'POST' })
export default request使用方式（更优雅）
示例页面中使用
import { getRequest, postRequest } from '@/utils/request.js'
// 获取用户信息
getRequest('/user/info').then(res => {
console.log('用户信息:', res)
})
// 提交表单
postRequest('/form/submit', { name: 'Tom' }).then(res => {
uni.showToast({ title: '提交成功' })
})
