請(qǐng)求后端接口全攻略：通用封裝 + 請(qǐng)求攔截器，一篇就夠！
作者：Ss肥魚
本文將手把手帶你掌握 uni.request 的基本用法和封裝通用請(qǐng)求方法。
在 UniApp 中與后端接口交互最常用的方式是 uni.request，但如果你每次都手動(dòng)調(diào)用、拼地址、寫 headers，會(huì)非常冗余、易錯(cuò)。
本文將手把手帶你：
- 掌握 uni.request 的基本用法
- 封裝通用請(qǐng)求方法
- 加入請(qǐng)求/響應(yīng)攔截器（如 token 注入、統(tǒng)一錯(cuò)誤處理）
uni.request 基礎(chǔ)用法
uni.request({
url: 'https://api.example.com/user',
method: 'GET',
data: { id: 1 },
success: (res) => {
console.log('響應(yīng)數(shù)據(jù):', res.data)
},
fail: (err) => {
console.error('請(qǐng)求失敗:', err)
}
})默認(rèn)支持所有平臺(tái)，包括 H5、小程序、App。
封裝通用 request 方法
我們創(chuàng)建一個(gè)統(tǒng)一的 request.js 工具模塊，集中處理：
- 基礎(chǔ) URL 拼接
- 請(qǐng)求方法封裝（get/post 等）
- token 注入（請(qǐng)求攔截器）
- 狀態(tài)碼統(tǒng)一處理（響應(yīng)攔截器）
文件目錄結(jié)構(gòu)推薦
├── utils/
│ └── request.js # 請(qǐng)求封裝模塊
├── config/
│ └── index.js # 全局配置項(xiàng)，如 baseURLconfig/index.js：配置項(xiàng)
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') || '', // 請(qǐng)求攔截器：自動(dòng)加 token
...headers
},
success: (res) => {
const { statusCode, data } = res
// 響應(yīng)攔截器
if (statusCode === 200) {
resolve(data)
} else {
uni.showToast({ title: data.message || '請(qǐng)求錯(cuò)誤', icon: 'none' })
reject(data)
}
},
fail: (err) => {
uni.showToast({ title: '網(wǎng)絡(luò)異常', 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使用方式（更優(yōu)雅）
示例頁面中使用：
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: '提交成功' })
})攔截器核心能力
攔截階段 | 功能 |
請(qǐng)求前 | 自動(dòng)加 token / 簽名 / 公共參數(shù) |
響應(yīng)后 | 統(tǒng)一處理錯(cuò)誤 / 彈出提示框 |
請(qǐng)求失敗 | 網(wǎng)絡(luò)錯(cuò)誤統(tǒng)一提示 |
小結(jié)
能力點(diǎn) | 收獲 |
uni.request | 理解基礎(chǔ)使用方法 |
模塊封裝 | 構(gòu)建統(tǒng)一請(qǐng)求管理方式 |
攔截器設(shè)計(jì) | 提高代碼復(fù)用性與健壯性 |
責(zé)任編輯：趙寧寧
來源：
Ssoul肥魚
