請求后端接口全攻略：通用封裝 + 請求攔截器，一篇就夠！
作者：Ss肥魚
本文將手把手帶你掌握 uni.request 的基本用法和封裝通用請求方法。
在 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 # 全局配置項，如 baseURLconfig/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: '提交成功' })
})攔截器核心能力
攔截階段 | 功能 |
請求前 | 自動加 token / 簽名 / 公共參數 |
響應后 | 統一處理錯誤 / 彈出提示框 |
請求失敗 | 網絡錯誤統一提示 |
小結
能力點 | 收獲 |
uni.request | 理解基礎使用方法 |
模塊封裝 | 構建統一請求管理方式 |
攔截器設計 | 提高代碼復用性與健壯性 |
責任編輯：趙寧寧
來源：
Ssoul肥魚
