当前位置：首页 > uni-app

uniapp 如何封装request请求

2026-02-05 17:52:54uni-app

封装request请求的方法

在UniApp中封装request请求可以提高代码复用性，便于统一处理错误和请求配置。以下是常见的封装方法：

基础封装示例

// utils/request.js
const baseURL = 'https://your-api-domain.com/api'

function request(options) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: baseURL + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: {
        'Content-Type': 'application/json',
        ...options.header
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data)
        } else {
          reject(res)
        }
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

export default request

添加拦截器

// 请求拦截
function requestWithInterceptor(options) {
  // 添加token等通用header
  const token = uni.getStorageSync('token')
  const headers = {
    'Authorization': `Bearer ${token}`,
    ...options.header
  }

  return request({
    ...options,
    header: headers
  }).catch(err => {
    // 统一错误处理
    if (err.statusCode === 401) {
      uni.navigateTo({ url: '/pages/login/login' })
    }
    return Promise.reject(err)
  })
}

使用示例

import request from '@/utils/request'

// GET请求
request({
  url: '/user',
  method: 'GET'
}).then(res => {
  console.log(res)
})

// POST请求
request({
  url: '/login',
  method: 'POST',
  data: {
    username: 'admin',
    password: '123456'
  }
})

高级封装建议

uniapp 如何封装request请求