一、前置知识
1. 什么是网络请求？
网络请求是指客户端与服务器进行数据交互的过程。客户端向服务器发送请求，服务器接收请求并进行处理，最后将处理结果返回给客户端。
在微信小程序中，我们通常通过网络请求获取服务器数据，或者向服务器提交数据。
2. 微信小程序对网络请求的限制
为了保障网络通信的安全性，微信小程序对网络请求有一定的限制，主要包括以下几点：
1.协议限制：正式环境下，网络请求通常需要使用 HTTPS 协议（本地开发调试时存在特定例外）。
2.域名配置：服务器接口使用的域名需要提前配置到微信公众平台小程序后台的相应服务器域名列表中。
3.域名校验：请求时需要满足微信小程序的域名校验规则，否则可能导致请求失败。
因此，在开发微信小程序之前，需要先确认服务器接口地址及相关域名配置是否正确。
3. 微信小程序原生网络请求 API
微信小程序提供了 `wx.request()` 方法，用于向服务器发送 HTTP 请求。
常用参数如下：
| 参数 | 说明 |
| url | 服务器接口地址 |
| data | 请求参数，可以是对象或字符串等支持的数据类型 |
| header | 设置请求头信息 |
| method | HTTP 请求方式，默认为GET |
| dataType | 返回数据的预期格式，默认为json |
| responseType | 响应数据的类型，默认为text |
| success | 请求成功完成后的回调函数 |
| fail | 请求失败时的回调函数 |
| complete | 请求结束时执行的回调函数，无论成功还是失败都会执行 |
下面以 GET 请求为例，演示如何使用wx.request()获取服务器数据：
wx.request({ url: 'https://example.com/api/user', method: 'GET', data: { name: 'zs' }, success: (res) => { console.log(res); }, fail: (err) => { console.error(err); } });其中，url需要替换为实际的接口地址，data用于传递请求参数，success和fail分别用于处理请求成功和失败的情况。
需要注意的是，请求成功不代表业务处理一定成功。例如，服务器可能正常返回 HTTP 200 状态码，但业务数据中仍然包含错误信息，因此还需要根据接口约定判断业务处理结果。
更多关于wx.request()的使用说明，可以参考微信官方文档：RequestTask | 微信开发文档
二、封装网络请求
1. 为什么需要对网络请求进行二次封装？
在实际开发中，如果每次请求接口都直接调用wx.request()，就需要重复编写请求地址、请求参数、请求头以及成功和失败的处理逻辑。当项目中的接口数量不断增加时，代码会变得冗余，也不利于后期维护。
因此，我们可以对wx.request()进行二次封装，将公共请求逻辑统一管理。
主要有以下几个优点：
1. 减少重复代码：统一处理请求配置，避免在每个接口中重复编写相同的逻辑。
2. 简化异步处理：通过 Promise 对请求结果进行封装，可以使用async/await或.then()处理异步操作，使代码更加清晰。
3. 统一错误处理：集中处理网络异常、HTTP 状态码异常以及业务错误，降低重复处理的成本。
4. 便于后期维护：可以统一配置基础请求地址、请求头和超时时间，方便后续扩展。
2. 封装思路
我们可以将原生的wx.request()包装成一个返回 Promise 的公共方法，并将其放在独立的工具文件中。
后续调用接口时，只需要传入接口地址、请求方式和请求参数，即可发起请求，无须重复编写底层请求逻辑。
接下来，我们就通过代码实现一个简单的网络请求封装：
// 服务器基础地址 const BASE_URL = 'https://example.com' // 默认请求超时时间 const TIMEOUT = 10000 // 默认请求头 const DEFAULT_HEADER = { 'content-type': 'application/json' } module.exports = function (options = {}) { const { url, method = 'GET', data = {}, header = {}, timeout = TIMEOUT } = options // 合并请求地址 const requestUrl = BASE_URL + url // 合并请求头 const requestHeader = { ...DEFAULT_HEADER, ...header } return new Promise((resolve, reject) => { wx.request({ url: requestUrl, method: method, data, header: requestHeader, timeout, success(res) { // HTTP 状态码校验 if (res.statusCode === 200) { // 请求成功，返回服务器相应数据 resolve(res.data) } else { // 请求失败，返回错误状态码 reject(new Error('请求失败，状态码：' + res.statusCode)) } }, // 网络异常、域名配置错误、请求超时等 fail(err) { reject(new Error('网络请求失败：' + err.errMsg)) } }) }) }
接下来就是在具体的页面中调用该函数：
// 假设是一个获取用户信息的接口 const request = require('../utils/request.js') Page({ data: { userInfo: null }, // 页面加载时获取用户信息 onLoad() { this.getUserInfo() }, // 获取用户信息 getUserInfo() { const res = request({ url: '/api/user', method: 'GET', data: { id: 1 } }) .then(res => { console.log('请求成功', res) }) .catch(err => { console.log('请求失败', err) }) } })如果这篇文章对你有帮助，欢迎点赞、收藏；如果你在封装过程中遇到其他问题，也欢迎在评论区一起交流。
