微信小程序 wx.request封装

最新推荐文章于 2024-06-25 15:57:59 发布

Jxufe渣渣斯

最新推荐文章于 2024-06-25 15:57:59 发布

阅读量2.6k

点赞数

分类专栏：前端（微信小程序、Web开发等）

本文链接：https://blog.csdn.net/JxufeCarol/article/details/117755736

版权

本文介绍了微信小程序中对`wx.request`的封装方法，包括使用Promise、管理请求域名、处理API请求以及封装示例，旨在优化代码结构，便于维护和提高性能。通过创建独立的api文件夹和配置文件，可以更好地管理和调用接口。

摘要由CSDN通过智能技术生成

参考链接：
（1）详解微信小程序网络请求接口封装
https://blog.csdn.net/zyplll/article/details/112272324
（2）微信小程序 wx.request 的封装
https://www.wxapp-union.com/portal.php?mod=view&aid=3660
（3）微信小程序wx.request的简单封装，超详细
https://blog.csdn.net/qq_43677737/article/details/107769366
（4）微信小程序接口数据封装（附前端面试题）
https://blog.csdn.net/weixin_45616142/article/details/107888591
（5）微信小程序数据封装，参数传值等经验分享
https://www.jb51.net/article/102471.htm

为实现定制要求和方便调用，对微信小程序的网络请求接口进行了封装
在根目录新建api文件夹并新建httpRequest.js与config.js文件

wx.request（Object）原型

wx.request({
   
      url: 'http://localhost:4000/top/playlist/highquality',//请求的接口地址
      method:"get|post|其他",//http请求数据的方式，默认是get
      data:{
   name:'',id:''},//请求的参数，如name和id
      header:{
   //请求头设置，根据需要自己设置
        //content-type默认为application/json
        'content-type':"application/x-www-form-urlencoded"
      },
      success(res){
   //请求成功时的回调函数
        console.log(res);
      },
      fail(msg){
   
          console.log(msg);//请求失败的回调函数
      }
    })

可能会遇到一个错误。所以，需要在微信开发者工具中设置“不校验合法域名”。
在这里插入图片描述
封装API接口的原因
因为本身就是一出现是一大段，自然如果不封包起来通过调用的方式进行整理的话，直接放到网站源码中，自然就会加大的源码的体积，而且还会影响到代码的美现。而且现在很多的杀来毒软件都把JS代码误报为病毒，况源且JS代码外露也很容易让不良分子找到攻击网站的参照物。

API接口封装的好处

提高网站的打开速度。
符合SEO搜索引擎思路。
以便于我们后期的维护，如果当我们的接口发生更改的时候，我们修改也很方便，不需要再一个页面的查找。
所以，对于提高网站访问zhidao速度，最好把JS代码封包起来，而且还要通过ROBOT文件把之屏蔽掉，毕竟这些都是搜索引挚不能识别的，外放对于提高收录只有坏外没有好处。
所以，为了收录、为了访问速度能封装的JS代码就尽量封装。

一、例子1

设置请求域名

// 设置请求域名
let ENV = __wxConfig.envVersion
let httpUrl = '',
if (ENV == 'develop') {
   
  // 测试版开发环境域名
  httpUrl = 'https://*******.com/api';
} else if (ENV == 'trial') {
   
  // // 体验版环境域名
  httpUrl = 'http://*******.com/api';
} else if (ENV == 'release') {
   
  // 线上环境域名
  httpUrl = 'https://*******.com/api';
}
export default httpUrl

在utils下方建立一个qs文件
根据自己项目数据需求是否下载qs（网址：https://gitee.com/zyplll/qs-file）
封装httpRequest

import Qs from '../utils/qs'
import httpUrl from './config'
const apiRequest = (option) => {
   
  /*
  option.url:请求地址
  option.header:头信息
  option.params:参数
  */
  let promise = new Promise(function (resolve, reject) {
   
    wx.showLoading({
   
      title: '努力加载中',
      mask: true
    });
    // 设置请求头
    let headers = {
   
      'Content-Type': 'application/x-www-form-urlencoded',
      'X-Requested-With': 'XMLHttpRequest'
    }
    // 对数据进行处理转换
    let params = Qs.stringify(option.params, {
   
      arrayFormat: 'indices',
      allowDots: true
    }).replace(/\[\d+\]=/g, "=")
    wx.request({
   

      url: httpUrl.connectorUrl + option.url,
      data: params,
      method: 'post',
      header: headers,
      // 超时时间
      timeout: 60000,
      success: function (res) {
   
        wx.hideLoading()
        if (res.statusCode == 200) {
   
          res = res.data
          if (res.code == -1) {
   
            // 跳转到登录

          } else if (res.code == 2) {
   
            wx.showModal({
   
              title: '提示',
              content: '您没有访问权限',