以下是一个支持 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 = resfor (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)
主要功能特点:
- Promise 支持:使用 Promise 封装原生请求 API
- 拦截器机制:
- 请求拦截器(认证、参数处理)
- 响应拦截器(错误处理、数据格式化)
- 快捷方法:内置 GET/POST/PUT/DELETE 快捷方法
- 全局配置:
- 基础 URL 配置
- 默认请求头
- 超时时间设置
- 错误处理:
- 网络错误自动提示
- 状态码错误处理
- 业务状态码统一处理