当前位置：首页 > uni-app

uniapp请求库封装

2026-02-06 09:26:04uni-app

uniapp请求库封装方法

在uniapp中封装请求库可以提升代码复用性、统一错误处理和简化接口调用。以下是常见的封装方式：

基础请求封装

创建一个request.js文件，封装uni.request：

uniapp请求库封装

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

const 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.data)
        }
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

export default request

添加拦截器功能

扩展基础封装，加入请求和响应拦截：

let requestInterceptors = []
let responseInterceptors = []

const addRequestInterceptor = (callback) => {
  requestInterceptors.push(callback)
}

const addResponseInterceptor = (callback) => {
  responseInterceptors.push(callback)
}

const runInterceptors = async (interceptors, initialValue) => {
  let value = initialValue
  for (const interceptor of interceptors) {
    value = await interceptor(value)
  }
  return value
}

const enhancedRequest = async (options) => {
  try {
    const processedOptions = await runInterceptors(requestInterceptors, options)
    const response = await request(processedOptions)
    return await runInterceptors(responseInterceptors, response)
  } catch (error) {
    throw error
  }
}

export { enhancedRequest as request, addRequestInterceptor, addResponseInterceptor }

使用示例

在页面中调用封装好的请求：

uniapp请求库封装

import request from './request.js'

// 添加请求拦截器
request.addRequestInterceptor(config => {
  config.header.token = uni.getStorageSync('token')
  return config
})

// 添加响应拦截器
request.addResponseInterceptor(response => {
  if (response.code === 401) {
    uni.navigateTo({ url: '/pages/login/login' })
  }
  return response
})

// 发起请求
const fetchData = async () => {
  try {
    const res = await request({
      url: '/api/user',
      method: 'POST',
      data: { id: 123 }
    })
    console.log(res)
  } catch (err) {
    console.error(err)
  }
}

TypeScript支持

如需TypeScript支持，可添加类型定义：

interface RequestOptions {
  url: string
  method?: 'GET' | 'POST' | 'PUT' | 'DELETE'
  data?: any
  header?: Record<string, string>
}

interface ResponseData {
  code: number
  data: any
  message?: string
}

const request = (options: RequestOptions): Promise<ResponseData> => {
  // 实现同上
}