微信小程序封装wx.request():基于Promise的最佳实践与代码实现

作者:木棉时间:2026-10-26 11:35:17浏览:311

本文详细解析如何在微信小程序中利用Promise对原生wx.request进行封装。针对原生API存在的回调地狱、代码冗余及可维护性差等问题,提供抽取共性参数的封装思路。通过构建统一的request.js模块及业务接口文件,实现代码复用与优雅调用,附带完整示例代码供参考。

原生wx.request()存在若干局限性。

参考微信小程序官方文档说明。

  • 容易引发回调地狱,出现多层success嵌套调用的情况(可通过Promise封装解决)。
  • 执行效率较低,代码结构冗杂,每次请求均需重复编写公共参数(如headers、基础url等)。
  • 代码可维护性较差,后续查看与修改不便;封装后逻辑集中于同一文件,结构清晰明了。
wx.request({
  url: 'example.php', //仅为示例,并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

作为专业前端开发者,出于对代码质量与可维护性的考量(而非单纯为了偷懒),应当对这类代码进行封装,从而使整体代码更加优雅。

封装的核心思路。

所有封装逻辑(无论是组件还是业务代码)的核心原则可总结为:抽取共性。

分析网络请求代码可以发现,其中存在大量重复部分,例如公共请求路径、统一错误处理机制以及headers参数(如token传递)。差异部分则包括具体接口地址、请求类型及请求参数。在封装过程中,我们将相同部分提取至独立文件,针对不同之处通过传参方式处理。

具体实现代码步骤。

首先创建api文件夹(名称可自定义,但建议规范化),并在该目录下新建文件request.js。

// ----http----
// api URL
const apiUrl = "https://接口地址:端口";// 公共的请求地址
// 封装微信请求方法
const request = (params) => {
  let url = params.url;
  let data = params.data;
  let method = params.method;
  let header = {
    "Content-Type": "application/json"
  };

  // 鉴权验证,获取登录之后后端返回的token,存在即在头部Authorization写token,具体的看后端需求
  if (wx.getStorageSync("token")) {
    // header.Authorization = wx.getStorageSync("token");
    header.token = wx.getStorageSync("token");
  }
  return new Promise((resolve, reject) => {
    wx.request({
      url: apiUrl + url, // api url
      method: method, // get/post
      data: data, // 请求参数
      header: header, // 头部
      success(res) {
        // 请求成功
        // 判断状态码---errCode状态根据后端定义来判断
        if (res.statusCode < 399) {
          if (res.data.Code === 401) {
            wx.showModal({
              title: "提示",
              content: "请登录",
              showCancel: false,
              success(res) {
                wx.navigateTo({
                  url: "/pages/login/login",
                });
              },
            });
            reject(res.data);
          }
          resolve(res.data);
        } else {
          // 其他异常
          switch (res.statusCode) {
            case 404:
              wx.showToast({
                title: '未知异常',
                duration: 2000,
              })
              break;
            default:
              wx.showToast({
                title: '请重试...',
                duration: 2000,
              })
              break;
          }
          reject("未知错误,请稍后再试");
        }
      },
      fail(err) {
        if (err.errMsg.indexOf('request:fail') !== -1) {
          wx.showToast({
            title: '网络异常',
            icon: "error",
            duration: 2000
          })
        } else {
          wx.showToast({
            title: '未知异常',
            duration: 2000
          })
        }
        reject(err);
      },
      complete() {
        wx.hideLoading()
      },
    });
  });
};

module.exports = {
  apiUrl,
  request,
}

随后根据具体业务需求,对特定接口地址进行封装。例如,在api文件夹下再新建user.js文件,用于存放登录、注册等方法,其请求类型和参数依据接口文档编写。

import {
  request
} from "./request"


// 用户相关

// 登录
export const login = (params) => {
  return request({
    url: '/user/login',
    data: params,
    method: 'POST',
  })
}
// 注册
export const register = (params) => {
  return request({
    url: '/user/reg',
    data: params,
    method: 'POST',
  })
}

在项目正式使用时的调用方式:

import {
  login
} from '../../../api/user'
// 点击登录的方法
handleLogin(){
    login({
      name: xxx,
      password: xxx,
    }).then((res) => {
      if (res.code == 200) {
   		// 登录成功之后的处理
      } else {
		// 登录失败的处理
      }
    }).catch((res) => {})
}

总结。

至此,关于微信小程序如何使用Promise对wx.request()封装的文章介绍完毕。如需了解更多相关内容,请搜索本站历史文章或继续浏览后续文章,感谢支持!

作者最新文章