微信小程序封装一个request请求

以下是一个支持 Promise 的微信小程序请求封装方案，包含基础请求、拦截器、错误处理和类型提示：

// utils/request.js

// 基础配置
const config = {
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
}

// 拦截器
const interceptors = {
  request: [],
  response: []
}

// 添加拦截器
function addInterceptor(type, interceptor) {
  interceptors[type].push(interceptor)
}

// 请求核心方法
function request(options = {}) {
  return new Promise((resolve, reject) => {
    // 合并配置
    const mergedOptions = {
      url: config.baseURL + (options.url || ''),
      method: 'GET',
      header: { ...config.headers, ...options.header },
      data: options.data || {},
      timeout: options.timeout || config.timeout,
      ...options
    }

    // 请求拦截
    const applyRequestInterceptors = async () => {
      for (const interceptor of interceptors.request) {
        mergedOptions = await interceptor(mergedOptions)
      }
      return mergedOptions
    }

    // 响应处理
    const handleResponse = async (res) => {
      let response = res
      for (const interceptor of interceptors.response) {
        response = await interceptor(response)
      }
      if (response.statusCode >= 200 && response.statusCode < 300) {
        resolve(response.data)
      } else {
        reject(response)
      }
    }

    // 执行请求
    applyRequestInterceptors()
      .then(finalOptions => {
        wx.request({
          ...finalOptions,
          success: handleResponse,
          fail: error => {
            wx.showToast({
              title: '网络连接失败',
              icon: 'none'
            })
            reject(error)
          }
        })
      })
      .catch(reject)
  })
}

// 快捷方法
const http = {
  get: (url, params, options) => request({ url, method: 'GET', data: params, ...options }),
  post: (url, data, options) => request({ url, method: 'POST', data, ...options }),
  put: (url, data, options) => request({ url, method: 'PUT', data, ...options }),
  delete: (url, data, options) => request({ url, method: 'DELETE', data, ...options }),
  interceptors: {
    request: {
      use: interceptor => addInterceptor('request', interceptor)
    },
    response: {
      use: interceptor => addInterceptor('response', interceptor)
    }
  }
}

export default http

使用示例：

// 在页面或组件中
import http from '@/utils/request'

// 添加请求拦截器（例如添加 token）
http.interceptors.request.use(config => {
  const token = wx.getStorageSync('token')
  if (token) {
    config.header.Authorization = `Bearer ${token}`
  }
  return config
})

// 添加响应拦截器（例如处理通用错误）
http.interceptors.response.use(response => {
  if (response.code !== 200) {
    wx.showToast({ title: response.message, icon: 'none' })
    return Promise.reject(response)
  }
  return response
})

// 发起请求
http.get('/user/info', { id: 123 })
  .then(data => console.log('请求成功:', data))
  .catch(err => console.error('请求失败:', err))

http.post('/order/create', { productId: 456 })
  .then(console.log)
  .catch(console.error)

主要功能特点：

1. Promise 支持：使用 Promise 封装原生请求 API
2. 拦截器机制：
   • 请求拦截器（认证、参数处理）
   • 响应拦截器（错误处理、数据格式化）
3. 快捷方法：内置 GET/POST/PUT/DELETE 快捷方法
4. 全局配置：
   • 基础 URL 配置
   • 默认请求头
   • 超时时间设置
5. 错误处理：
   • 网络错误自动提示
   • 状态码错误处理
   • 业务状态码统一处理