网站导航
> 技术文档 > 微信小程序-网络请求和封装_微信小程序请求封装

微信小程序-网络请求和封装_微信小程序请求封装

网友: 技术文档 2025-07-30 19:48:04

文章目录

  • 一、微信小程序网络请求基础
  • 二、常用网络请求方法
    • （一）GET 请求
    • （二）POST 请求
  • 三、网络请求封装的必要性
  • 四、网络请求封装步骤
    • （一）创建封装函数
    • （二）使用封装函数
  • 五、封装的高级应用
    • （一）添加请求拦截器
    • （二）添加响应拦截器

一、微信小程序网络请求基础

微信小程序提供了wx.request API 来发起网络请求，它支持 HTTP/HTTPS 协议。其基本语法如下：

wx.request({ url: \'https://example.com/api\', // 服务器接口地址 data: { key: \'value\' }, method: \'GET\', // 默认是GET，也可以是POST、PUT、DELETE等 success: (res) => { console.log(res.data); }, fail: (err) => { console.error(err); }, complete: () => { // 无论请求成功或失败都会执行 }});
  • url：必填项，指定请求的服务器接口地址。
  • data：可选，用于发送到服务器的数据，可以是对象、字符串或ArrayBuffer。
  • method：可选，指定 HTTP 请求方法，默认为GET。
  • success：请求成功后的回调函数，res.data包含服务器返回的数据。
  • fail：请求失败时的回调函数，err包含错误信息。
  • complete：请求完成后的回调函数，无论请求成功或失败都会执行。

二、常用网络请求方法

（一）GET 请求

GET 请求通常用于从服务器获取数据，数据会附加在 URL 的查询参数中。例如：

wx.request({ url: \'https://example.com/api/list?page=1&limit=10\', method: \'GET\', success: (res) => { console.log(res.data); }});

GET 请求的优点是简单、直观，缺点是由于数据暴露在 URL 中，安全性较低，且 URL 长度有限，不适用于大量数据的传输。

（二）POST 请求

POST 请求常用于向服务器提交数据，数据会放在请求体中。例如：

wx.request({ url: \'https://example.com/api/add\', data: { name: \'John\', age: 30 }, method: \'POST\', success: (res) => { console.log(res.data); }});

POST 请求相对安全，且可以传输大量数据，常用于表单提交、文件上传等场景。

三、网络请求封装的必要性

  • 代码复用：在一个小程序中，可能会有多个页面需要进行网络请求。如果每个页面都单独编写请求代码，会导致代码重复，增加维护成本。通过封装，可以将通用的请求逻辑抽离出来，提高代码的复用性。
  • 统一处理：封装可以方便地对请求进行统一的处理，如添加请求头、处理错误、加载动画管理等。这样可以保证整个小程序的请求处理逻辑一致，提升用户体验。
  • 易于维护：封装后的代码结构更加清晰，当需要修改请求逻辑或服务器地址时，只需要在封装的函数中进行修改，而不需要在每个使用请求的地方都进行修改。

四、网络请求封装步骤

（一）创建封装函数

在项目的utils文件夹下创建一个request.js文件，用于封装网络请求。
微信小程序-网络请求和封装_微信小程序请求封装

// request.jsfunction request(url, data = {}, method = \'GET\') { return new Promise((resolve, reject) => { wx.showLoading({ title: \'加载中...\' }); wx.request({ url: \'https://example.com\' + url, // 假设服务器地址前缀为https://example.com data: data, method: method, header: { \'Content-Type\': \'application/json\' }, success: (res) => { wx.hideLoading(); if (res.statusCode === 200) { resolve(res.data); } else { reject(new Error(\'请求失败，状态码：\' + res.statusCode)); } }, fail: (err) => { wx.hideLoading(); reject(new Error(\'网络请求失败：\' + err.errMsg)); } }); });}export default request;

（二）使用封装函数

在页面的.js文件中引入封装的函数并使用。

// pages/home/home.jsimport request from \'../../utils/request.js\';Page({ async getData() { try { const res = await request(\'/api/list\', { page: 1, limit: 10 }, \'GET\'); console.log(res); } catch (error) { console.error(error); } }, onLoad: function() { this.getData(); }});

五、封装的高级应用

（一）添加请求拦截器

可以在请求发送前对请求进行一些处理，如添加 token。

// request.jsfunction request(url, data = {}, method = \'GET\') { return new Promise((resolve, reject) => { const token = wx.getStorageSync(\'token\'); wx.showLoading({ title: \'加载中...\' }); wx.request({ url: \'https://example.com\' + url, data: data, method: method, header: { \'Content-Type\': \'application/json\', \'Authorization\': `Bearer ${token}` }, success: (res) => { wx.hideLoading(); if (res.statusCode === 200) { resolve(res.data); } else { reject(new Error(\'请求失败，状态码：\' + res.statusCode)); } }, fail: (err) => { wx.hideLoading(); reject(new Error(\'网络请求失败：\' + err.errMsg)); } }); });}

（二）添加响应拦截器

可以在响应返回后对数据进行处理，如统一处理错误信息。

// request.jsfunction request(url, data = {}, method = \'GET\') { return new Promise((resolve, reject) => { const token = wx.getStorageSync(\'token\'); wx.showLoading({ title: \'加载中...\' }); wx.request({ url: \'https://example.com\' + url, data: data, method: method, header: { \'Content-Type\': \'application/json\', \'Authorization\': `Bearer ${token}` }, success: (res) => { wx.hideLoading(); if (res.statusCode === 200) { if (res.data.code === 0) { resolve(res.data.data); } else { wx.showToast({  title: res.data.msg,  icon: \'none\' }); reject(new Error(res.data.msg)); } } else { reject(new Error(\'请求失败，状态码：\' + res.statusCode)); } }, fail: (err) => { wx.hideLoading(); reject(new Error(\'网络请求失败：\' + err.errMsg)); } }); });}
网络标签：

相关问题