請求后端接口全攻略：通用封裝 + 請求攔截器，一篇就夠！

作者：Ss肥魚 2025-04-18 10:26:29

本文將手把手帶你掌握 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       # 全局配置項，如 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: '提交成功' })
})

攔截器核心能力

攔截階段	功能
請求前	自動加 token / 簽名 / 公共參數
響應后	統一處理錯誤 / 彈出提示框
請求失敗	網絡錯誤統一提示

小結

能力點	收獲
uni.request	理解基礎使用方法
模塊封裝	構建統一請求管理方式
攔截器設計	提高代碼復用性與健壯性

責任編輯：趙寧寧來源： Ssoul肥魚

后端接口通用封裝

請求后端接口全攻略：通用封裝 + 請求攔截器，一篇就夠！