微信小步伐封装一个request哀求

以下是一个支持 Promise 的微信小步伐哀求封装方案，包含基础哀求、拦截器、错误处置处罚和类型提示：

1. // utils/request.js
3. // 基础配置
4. const config = {
5.   baseURL: 'https://api.example.com',
6.   timeout: 10000,
7.   headers: {
8.     'Content-Type': 'application/json'
9.   }
10. }
12. // 拦截器
13. const interceptors = {
14.   request: [],
15.   response: []
16. }
18. // 添加拦截器
19. function addInterceptor(type, interceptor) {
20.   interceptors[type].push(interceptor)
21. }
23. // 请求核心方法
24. function request(options = {}) {
25.   return new Promise((resolve, reject) => {
26.     // 合并配置
27.     const mergedOptions = {
28.       url: config.baseURL + (options.url || ''),
29.       method: 'GET',
30.       header: { ...config.headers, ...options.header },
31.       data: options.data || {},
32.       timeout: options.timeout || config.timeout,
33.       ...options
34.     }
36.     // 请求拦截
37.     const applyRequestInterceptors = async () => {
38.       for (const interceptor of interceptors.request) {
39.         mergedOptions = await interceptor(mergedOptions)
40.       }
41.       return mergedOptions
42.     }
44.     // 响应处理
45.     const handleResponse = async (res) => {
46.       let response = res
47.       for (const interceptor of interceptors.response) {
48.         response = await interceptor(response)
49.       }
50.       if (response.statusCode >= 200 && response.statusCode < 300) {
51.         resolve(response.data)
52.       } else {
53.         reject(response)
54.       }
55.     }
57.     // 执行请求
58.     applyRequestInterceptors()
59.       .then(finalOptions => {
60.         wx.request({
61.           ...finalOptions,
62.           success: handleResponse,
63.           fail: error => {
64.             wx.showToast({
65.               title: '网络连接失败',
66.               icon: 'none'
67.             })
68.             reject(error)
69.           }
70.         })
71.       })
72.       .catch(reject)
73.   })
74. }
76. // 快捷方法
77. const http = {
78.   get: (url, params, options) => request({ url, method: 'GET', data: params, ...options }),
79.   post: (url, data, options) => request({ url, method: 'POST', data, ...options }),
80.   put: (url, data, options) => request({ url, method: 'PUT', data, ...options }),
81.   delete: (url, data, options) => request({ url, method: 'DELETE', data, ...options }),
82.   interceptors: {
83.     request: {
84.       use: interceptor => addInterceptor('request', interceptor)
85.     },
86.     response: {
87.       use: interceptor => addInterceptor('response', interceptor)
88.     }
89.   }
90. }
92. export default http

复制代码

利用示例：

1. // 在页面或组件中
2. import http from '@/utils/request'
4. // 添加请求拦截器（例如添加 token）
5. http.interceptors.request.use(config => {
6.   const token = wx.getStorageSync('token')
7.   if (token) {
8.     config.header.Authorization = `Bearer ${token}`
9.   }
10.   return config
11. })
13. // 添加响应拦截器（例如处理通用错误）
14. http.interceptors.response.use(response => {
15.   if (response.code !== 200) {
16.     wx.showToast({ title: response.message, icon: 'none' })
17.     return Promise.reject(response)
18.   }
19.   return response
20. })
22. // 发起请求
23. http.get('/user/info', { id: 123 })
24.   .then(data => console.log('请求成功:', data))
25.   .catch(err => console.error('请求失败:', err))
27. http.post('/order/create', { productId: 456 })
28.   .then(console.log)
29.   .catch(console.error)

复制代码

重要功能特点：

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。