当前位置：首页 > uni-app

uniapp 网络封装

2026-01-14 18:46:54uni-app

uniapp 网络请求封装方法

uniapp 提供了 uni.request 方法进行网络请求，但直接使用可能导致代码重复和维护困难。封装网络请求可以提高代码复用性和可维护性。

基础封装示例

创建一个 http.js 文件，封装基础请求方法：

uniapp 网络封装

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)
      }
    })
  })
}

添加拦截器功能

扩展封装以支持请求和响应拦截：

const interceptors = {
  request: [],
  response: []
}

function useRequestInterceptor(interceptor) {
  interceptors.request.push(interceptor)
}

function useResponseInterceptor(interceptor) {
  interceptors.response.push(interceptor)
}

async function request(options) {
  let config = {...options}

  // 请求拦截
  for (const interceptor of interceptors.request) {
    config = await interceptor(config)
  }

  return new Promise((resolve, reject) => {
    uni.request({
      ...config,
      url: baseURL + config.url,
      success: async (res) => {
        let response = res
        // 响应拦截
        for (const interceptor of interceptors.response) {
          response = await interceptor(response)
        }
        resolve(response.data)
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

常用方法封装

基于基础请求方法封装常用 HTTP 方法：

uniapp 网络封装

export const http = {
  get(url, params, options = {}) {
    return request({
      url,
      method: 'GET',
      data: params,
      ...options
    })
  },

  post(url, data, options = {}) {
    return request({
      url,
      method: 'POST',
      data,
      ...options
    })
  },

  put(url, data, options = {}) {
    return request({
      url,
      method: 'PUT',
      data,
      ...options
    })
  },

  delete(url, data, options = {}) {
    return request({
      url,
      method: 'DELETE',
      data,
      ...options
    })
  }
}

使用示例

在页面中引入并使用封装后的方法：

import { http } from './http.js'

// 基本使用
http.get('/user', {id: 1}).then(res => {
  console.log(res)
}).catch(err => {
  console.error(err)
})

// 添加拦截器
useRequestInterceptor(config => {
  const token = uni.getStorageSync('token')
  if (token) {
    config.header = {
      ...config.header,
      'Authorization': `Bearer ${token}`
    }
  }
  return config
})

useResponseInterceptor(response => {
  if (response.statusCode === 401) {
    uni.navigateTo({url: '/pages/login/login'})
  }
  return response
})

错误处理增强

添加统一的错误处理逻辑：

function request(options) {
  return new Promise((resolve, reject) => {
    uni.request({
      ...options,
      url: baseURL + options.url,
      success: (res) => {
        if (res.statusCode >= 200 && res.statusCode < 300) {
          resolve(res.data)
        } else {
          handleError(res)
          reject(res)
        }
      },
      fail: (err) => {
        handleError(err)
        reject(err)
      }
    })
  })
}

function handleError(error) {
  const status = error.statusCode
  let message = ''

  switch(status) {
    case 400:
      message = '请求错误'
      break
    case 401:
      message = '未授权，请登录'
      break
    case 403:
      message = '拒绝访问'
      break
    case 404:
      message = '请求地址不存在'
      break
    case 500:
      message = '服务器内部错误'
      break
    default:
      message = '网络连接失败'
  }

  uni.showToast({
    title: message,
    icon: 'none'
  })
}