小程序请求封装、使用

news2025/1/15 17:48:15

小程序请求封装

在这里插入图片描述

1、要了解方法

1.1、wx.request()

wx.request 发起 HTTPS 网络请求。（详情点击wx.request查看官方文档）

1.2、wx.showModal()

wx.showModal 显示模态对话框。（详情点击wx.showModal查看官方文档）

1.3、wx.showLoading()

wx.showLoading 显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框。（详情点击wx.showLoading查看官方文档）

2、封装

2.1 定义常量信息

const baseUrl = 'https://xxx.xxx.cn';
const SUCCESS_CODE = "0" 
const FAIL_CODE = "-1"
const EXPIRE_CODE = "300001"
// 不需要携带 sessionKey 的白名单
const urlList = [
  '/wxMall/weixin/api/user/login'
]

2.2 封装方法

2.2.1 封装showModal方法

展示错误信息

/**
 * 提示框 方法
 * @param {String} msg 展示信息
 * @param {Function} confirm 点击确定的回调函数
 */
function showModal(msg, confirm,confirmText = "确定") {
  wx.showModal({
    title: '提示',
    content: msg,
    showCancel: false,
    confirmText,
    success: res => {
      if (res.confirm) confirm()
    }
  })
}

2.2.2 封装request方法

发起 HTTPS 网络请求

function request(url, method = "GET", data = {}, config) {
  wx.showLoading({
    title: '加载中',
    mask: true
  })
  // 设置请求头
  const header = {
    'content-type': 'application/json',
    ...config
  };

  // 需要加 sessionKey 的 url，将白名单中url过滤掉
  const requiresToken = !urlList.some(s => url.includes(s));
  if (requiresToken) header["wx-session"] = wx.getStorageSync('sessionKey');

  return new Promise((resolve, reject) => {
    wx.request({
      url: baseUrl + url,
      method,
      header,
      data, 
      success: res => {
        if (res.data.code === SUCCESS_CODE) resolve(res.data);
      },
      complete: err => {
        // 关闭loading
        wx.hideLoading();
        // 登录过期时，重新登录
        if (err.data.code === EXPIRE_CODE) {
          wx.removeStorageSync('sessionKey')
          wx.removeStorageSync('authorize')
          showModal(err.data.message, async () => {
            await wxLogin()
            wx.redirectTo({
              url: `/${getCurPageUrl()}`,
            })
          }, "登录")
        }
        // 正常的错误信息展示
        if (err.data.code === FAIL_CODE)  showModal(err.data.message, () => {})
      }
    })
  })
}

2.2.3 封装get方法

/**
 * GET请求封装
 * @param {String} url 请求地址
 * @param {object} data 请求入参
 * @param {object} config 请求配置 header，如 content-type
 */
const get = (url, data = {}, config = {}) => request(url, "GET", data, config)

2.2.4 封装post方法

/**
 * POST请求封装
 * @param {String} url 请求地址
 * @param {object} data 请求入参
 * @param {object} config 请求配置 header，如 content-type
 */
const post = (url, data = {}, config = {}) => request(url, "POST", data, config)

2.2.5 封装 login 方法

登录微信

function wxLogin() {
  return new Promise((resolve, rejext) => {
    // 登录
    wx.login({
      success: async res => {
        const { data: {sessionKey, authorize} } = await post(
          `/wxMall/xxx/api/xxx/login/${res.code}`, 
          null, 
          {
          	"content-type": "application/x-www-form-urlencoded"
        	}
        )
        wx.setStorageSync('sessionKey',sessionKey);
        wx.setStorageSync('authorize', authorize);
        resolve()
      }
    })
  })
}

2.2.6 封装 getCurPageUrl 方法

获取当前页面url信息

function getCurPageUrl() {
  const pages = getCurrentPages(); // 获取加载的页面
  const curPage = pages[pages.length - 1]; // 获取当前页面的对象
  const options = Object.entries(curPage.options);
  const params = options.map(([key, value]) => `${key}=${value}`).join('&');
  const url = `${curPage.route}?${params}`;
  return url;
}

3、完整封装

在项目中创建api文件夹 用于放 request.js(请求封装) 和 index.js(api封装)

request.js

const baseUrl = 'https://xxx.xxx.cn';
const SUCCESS_CODE = "0" 
const FAIL_CODE = "-1"
const EXPIRE_CODE = "300001"
// 不需要携带 sessionKey 的白名单
const urlList = [
  '/wxMall/xxx/api/xxx/login'
]

/**
 * 提示框 方法
 * @param {String} msg 展示信息
 * @param {Function} confirm 点击确定的回调函数
 */
function showModal(msg, confirm,confirmText = "确定") {
  wx.showModal({
    title: '提示',
    content: msg,
    showCancel: false,
    confirmText,
    success: res => {
      if (res.confirm) confirm()
    }
  })
}

/**
 * 获取当前页面url 方法
 */
function getCurPageUrl() {
  const pages = getCurrentPages(); // 获取加载的页面
  const curPage = pages[pages.length - 1]; // 获取当前页面的对象
  const options = Object.entries(curPage.options);
  const params = options.map(([key, value]) => `${key}=${value}`).join('&');
  const url = `${curPage.route}?${params}`;
  return url;
}

function wxLogin() {
  return new Promise((resolve, rejext) => {
    // 登录
    wx.login({
      success: async res => {
        const { data: {sessionKey, authorize} } = await post(
          `/wxMall/xxx/api/xxx/login/${res.code}`, 
          null, 
          {
          	"content-type": "application/x-www-form-urlencoded"
        	}
        )
        wx.setStorageSync('sessionKey',sessionKey);
        wx.setStorageSync('authorize', authorize);
        resolve()
      }
    })
  })
}

function request(url, method = "GET", data = {}, config) {
  wx.showLoading({
    title: '加载中',
    mask: true
  })
  // 设置请求头
  const header = {
    'content-type': 'application/json',
    ...config
  };

  // 需要加 sessionKey 的 url，将白名单中url过滤掉
  const requiresToken = !urlList.some(s => url.includes(s));
  if (requiresToken) header["wx-session"] = wx.getStorageSync('sessionKey');

  return new Promise((resolve, reject) => {
    wx.request({
      url: baseUrl + url,
      method,
      header,
      data, 
      success: res => {
        if (res.data.code === SUCCESS_CODE) resolve(res.data);
      },
      complete: err => {
        // 关闭loading
        wx.hideLoading();
        // 登录过期时，重新登录
        if (err.data.code === EXPIRE_CODE) {
          wx.removeStorageSync('sessionKey')
          wx.removeStorageSync('authorize')
          showModal(err.data.message, async () => {
            await wxLogin()
            wx.redirectTo({
              url: `/${getCurPageUrl()}`,
            })
          }, "登录")
        }
        // 正常的错误信息展示
        if (err.data.code === FAIL_CODE)  showModal(err.data.message, () => {})
      }
    })
  })
}

/**
 * GET请求封装
 * @param {String} url 请求地址
 * @param {object} data 请求入参
 * @param {object} config 请求配置 header，如 content-type
 */
const get = (url, data = {}, config = {}) => request(url, "GET", data, config)

/**
 * POST请求封装
 * @param {String} url 请求地址
 * @param {object} data 请求入参
 * @param {object} config 请求配置 header，如 content-type
 */
const post = (url, data = {}, config = {}) => request(url, "POST", data, config)


module.exports = {
  get,
  post,
  wxLogin
}

index.js

const {
  get,
  post
} = require("./request")

const config = {
  "content-type": "application/x-www-form-urlencoded"
}
const api = {

  // 授权接口
  authorizeLogin: data => post(`/wxMall/xxx/api/xxx/authorizeLogin`, data),

  // 权益销售列表
  rightsSaleList: data => get(`/wxMall/xxx/list`, data, config),

  // 权益订单列表
  rightsOrderList: data => get(`/wxMall/xxx/list`, data),

  ...

};
module.exports = {
  ...api
}

4、使用

// 引入
const { rightsSaleList } = require("../../api/index")


Page({
  data:{
    pageNum: 1, 
    pageSize: 10, 
  },
  async getList(){
    const { pageNum, pageSize } = this.data;
    const params = { pageNum, pageSize};
    // 使用
    const res = await rightsSaleList(params);
    console.log(res)
  }
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/667004.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Swift 周报 第三十一期

Swift 周报 第三十一期

文章目录 前言新闻和社区注册 WWDC23 实验室和活动Apple Vision Pro 和 visionOS 撼世登场App Store 中新增的隐私功能 提案正在审查的提案 Swift论坛推荐博文话题讨论关于我们 前言 本期是 Swift 编辑组自主整理周报的第二十二期，每个模块已初步成型。各位读者如果…
阅读更多...
奇数分频器电路设计

奇数分频器电路设计

目录 奇数分频器电路设计 1、奇数分频器电路简介 2、实验任务 3、程序设计 3.1、7分频电路代码 3.2、仿真验证 3.2.1、编写 TB 文件 3.2.2、仿真验证 4、用状态机实现7分频电路设计 4.1、代码如下： 4.2、使用状态机的好处 奇数分频器电路设计 前面一节我…
阅读更多...
前端JS限制绕过测试-业务安全测试实操(17)

前端JS限制绕过测试-业务安全测试实操(17)

前端JS限制绕过测试,请求重放测试 前端JS限制绕过测试 测试原理和方法 很多商品在限制用户购买数量时，服务器仅在页面通过JS脚本限制，未在服务器端校验用户提交的数量，通过抓取客户端发送的请求包修改JS端生成处理的交易数据，如将请求中的商品数量改为大于最大数限制的值…
阅读更多...
Vue中使用分布式事务管理解决方案

Vue中使用分布式事务管理解决方案

文章目录 分布式事务管理是什么优点：缺点：弥补缺点的方法有： 解决方案 分布式事务管理是什么 分布式事务管理是指在分布式系统中对跨多个数据库或服务的操作进行协调和保证一致性的机制。在分布式环境下，由于涉及到多个独立的资源…
阅读更多...
半年面试12家大厂，我总结出了这份2023版互联网大厂（Java岗）面试真题汇总

半年面试12家大厂，我总结出了这份2023版互联网大厂（Java岗）面试真题汇总

Java面试 现在互联网大环境不好，互联网公司纷纷裁员并缩减HC，更多程序员去竞争更少的就业岗位，整的IT行业越来越卷。身为Java程序员的我们就更不用说了，上班8小时需要做好本职工作，下班后还要不断提升技能、技术栈&am…
阅读更多...
docker 命令解释 - nginx镜像制作

docker 命令解释 - nginx镜像制作

目录 Dockerfile 部分命令解释 1、ENTRYPOINT 而ENTRYPOINT 语言 CMD的区别 1、docker run 启动容器的时候，可以传递参数进入给ENTRYPOINT里面的命令（-e） 2、当2者都存在的时候，CMD里的内容会成为 ENTRYPOINT 里的参数&#x…
阅读更多...
Pytest中断言的重要性

Pytest中断言的重要性

目录 前言 pytest断言 增加断言详细信息 异常断言 .type .value .traceback pytest常用断言 前言 在pytest中，断言是非常重要的一部分。断言可以帮助我们验证代码的正确性，检查函数返回的值是否符合要求，以及判断程序中预期行为是否发生。如…
阅读更多...
MySQL数据库（二）

MySQL数据库（二）

前言 本文是关于MySQL数据库的第二弹。 临时表不受原表数据类型的约束！！ SQL语法不区分大小写。 一、列的使用 （一）列的增加 1、全列插入 insert into 表名 values (数据,数据); 也可以同时插入多条数据: insert into 表名 va…
阅读更多...
小程序跳转多次返回首页

小程序跳转多次返回首页

小程序跳转多次返回首页 小程序跳转多个页面后直接返回首页 问题 例&#xff1a; 跳转&#xff1a;A(首页) - > B -> C -> D 返回&#xff1a;D -> A(首页) 1、页面中按钮跳转 <!--D页面 WXML--> <view class"-btn"><button bindtap&q…
阅读更多...
6月第3周榜单丨飞瓜数据B站UP主排行榜（哔哩哔哩）发布！

6月第3周榜单丨飞瓜数据B站UP主排行榜（哔哩哔哩）发布！

飞瓜轻数发布2023年6月12日-6月18日飞瓜数据UP主排行榜&#xff08;B站平台&#xff09;&#xff0c;通过充电数、涨粉数、成长指数三个维度来体现UP主账号成长的情况&#xff0c;为用户提供B站号综合价值的数据参考&#xff0c;根据UP主成长情况用户能够快速找到运营能力强的B…
阅读更多...
浅谈智能配电房的系统设计和技术方案

浅谈智能配电房的系统设计和技术方案

张心志acrelzxz 安科瑞电气股份有限公司 上海嘉定 201801 摘 要&#xff1a;为了进一步提升配网运维工作质量和效率&#xff0c;支撑配网技术发展向数字化、精益化、智能化转型。在大量的配电房现状问题分析以及新监测技术调研的基础上&#xff0c;文章提出了智能配电房…
阅读更多...
WebGL/Threejs瀑布水流粒子效果

WebGL/Threejs瀑布水流粒子效果

webgl瀑布效果 初始化场景 function init () {scene new THREE.Scene();camera new THREE.PerspectiveCamera (45, scr.w / scr.h, 0.1, 10000);renderer new THREE.WebGLRenderer ({ antialias: true });renderer.gammaInput true;renderer.gammaOutput true;renderer.…
阅读更多...
盘点中国顶级黑客Top10，最后一位你猜是谁

盘点中国顶级黑客Top10，最后一位你猜是谁

第一名&#xff1a;袁仁广　别名&#xff1a;大兔子(datuzi)&#xff0c;人称袁哥。提起袁任广&#xff0c;知道的人或许并不多。但如果提起袁哥或者大兔子&#xff0c;在国内安全业界称得上尽人皆知。在国内&#xff0c;他的windows系统方面的造诣可谓首屈一指&#xff0c;早在…
阅读更多...
centos系统socket5安装与使用

centos系统socket5安装与使用

一、socket5安装 1、安装依赖 yum -y install gcc openldap-devel pam-devel openssl-devel 2、安装socket5 wget http://nchc.dl.sourceforge.net/project/ss5/ss5/3.8.9-8/ss5-3.8.9-8.tar.gztar -xzvf ss5-3.8.9-8.tar.gzcd ss5-3.8.9./configuremakemake install 二、…
阅读更多...
Android Jetpack Compose — Slider滑动条

Android Jetpack Compose — Slider滑动条

在Android Jetpack Compose中&#xff0c;Slider(滑动条&#xff09;是一个常用的用户界面控件&#xff0c;它允许通过滑动条来选择一个范围或数值。Slider控件非常适用于调整音量、亮度、进度等需要连续调整的场景。 一、Slider的属性 Slider是Android Jetpack Compose中的一个…
阅读更多...
html实现多种风格步骤条

html实现多种风格步骤条

文章目录 1.设计来源1.1 线性风步骤条1.2 进度风步骤条1.3 花式风步骤条1.4 格子风步骤条 2.效果和源码2.1 动态效果2.2 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/131308246 html实现多种风格步骤…
阅读更多...
Java版本+企业电子招投标系统源代码

Java版本+企业电子招投标系统源代码

一、立项管理 1、招标立项申请 功能点&#xff1a;招标类项目立项申请入口&#xff0c;用户可以保存为草稿&#xff0c;提交。 2、非招标立项申请 功能点&#xff1a;非招标立项申请入口、用户可以保存为草稿、提交。 3、采购立项列表 功能点&#xff1a;对草稿进行编辑&#x…
阅读更多...
浅析景区慢直播的需求与基于视频技术的解决方案

浅析景区慢直播的需求与基于视频技术的解决方案

一、行业背景 从春节到“五一”假期&#xff0c;旅游市场高开稳走&#xff0c;复苏持续提速。“慢直播”是一种特别的直播形式&#xff0c;没有主持人&#xff0c;也没有绚丽的镜头切换以及精美的后期制作&#xff0c;只用固定机位拍摄来更加真实地展现事件现场&#xff0c;以…
阅读更多...
文件上传413状态码报错解决方案

文件上传413状态码报错解决方案

目录 前言 解决办法 前言 我的前端Vue项目部署在Nginx上&#xff0c;当我上传一个3M多的图片时&#xff0c;发生413错误&#xff0c;刚开始我以为是数据库字段不对&#xff0c;但我看后确实是大数据类型&#xff08;text、blob&#xff09;&#xff0c;这种数据类型应对一张…
阅读更多...
《后端存储实战课》课程学习笔记（三）

《后端存储实战课》课程学习笔记（三）

流量大、数据多的商品详情页系统该如何设计&#xff1f; 电商的商品系统主要功能就是增删改查商品信息&#xff0c;没有很复杂的业务逻辑&#xff0c;支撑的主要页面就是商品详情页。设计这个系统的存储&#xff0c;你仍然需要着重考虑两个方面的问题。 第一&#xff0c;要考虑…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023