微信小程序promise封装

news2025/4/11 13:03:21

一. 在utils文件夹内创建一个request.js  写以下封装的 wx.request() 方法

const baseURL = 'https:// +  '域名' '; //公用总路径地址
export const request = (params) => {      //暴露出去一个函数,并且接收一个外部传入的参数

  let dataObj = params.data || {};   //拿到传递进来的参数
  let headerObj = {                  //这里 可以添加一些请求头
    'content-type': 'application/json'
  }

  return new Promise((resolve, reject) => {  //通过 Promise 对 wx.request 方法进行异步处理。
    wx.request({
      url: baseURL + params.url,      //通过默认的请求地址,再加上外部传入的 具体业务地址,组成一个完整的 请求地址。
      method: params.method || "GET",   //外部 业务调用请求时,并传入 所需的请求方法,如果没有传递请求方法,则默认为 GET 请求
      data: dataObj,                  //这里的参数,来自于外部传入的参数
      header: headerObj,
      success: res => {
        if (res.statusCode === 200) {
          resolve(res);                    // 请求成功后,调用 Promise 的回调 resolve() 方法,将参数返回出去到 Promise 的实例对象身上。
          wx.showToast({
            title: "请求成功",
            icon: "success"
          })
          return;
        } else {
          wx.showToast({
            title: "请求失败",
            icon: "error"
          })
          reject(res);    //同样请求失败后,向 Promise 实例返回出 错误的信息
        }
      },
      // fail: err => {
      //   reject(err)    //同样请求失败后,向 Promise 实例返回出 错误的信息
      // }
    })
  })
}

 二 . 在项目中,新建一个 API文件夹,用来做请求接口 模块化管理,这么做的原因是,虽然我们的请求接口封装了,但是整个项目中,调用接口的地方太多了,如果直接在各自页面中调用,也会显得代码十分的庸杂,所以不同的功能模块接口调用,为了避免混淆在一起,建议将api 请求接口 抽离出去,这样一来,页面的 js 部分就只着重于对发起请求前和请求响应后的数据逻辑处理。

api/index/js

import { request } from "../utils/request";  //导入我们封装的请求方法。

//首页请求接口
export const index = (params) => {     //接收页面调用传递过来的参数
  return request({   //调用请求方法
    url: "/api/science/index",   //传入请求地址
    method: "GET",               //传入请求方法
    data : params                //这里的参数来自于页面调用时,传过来的参数  
  })
}

三 . 必须配置服务器白域名 必须是https开头的

最后:在页面中,调用上述模块中相应的 api 接口,将参数依次传递过去,同时由于我们的请求方法是采用了 Promise 的方式封装的,所以在页面逻辑调用时,还可以 使用 async 和 await 的方式,将异步代码做同步化处理。

// const { from } = require("form-data");
import {index} from '../../api/index.js';

// pages/demos/demos.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  async getdatas() {
    let parameter = {}         //页面中,收集处理好,要传递的参数
    let data = await index(parameter);
    console.log(data);
    //data 身上就可以直接拿到,请求回来的数据。
    // if (data.statusCode === 200) {
    //   wx.showToast({
    //     title: "首页加载成功",
    //     icon: "success"
    //   })
    // }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getdatas();
  },

  
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

原创作者:吴小糖

创作时间:2023.12.22

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

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

相关文章

MsSQL中的索引到底长啥样,查找过程怎么进行

参考文章一 参考文章二 建表 mysql> create table user(-> id int(10) auto_increment,-> name varchar(30),-> age tinyint(4),-> primary key (id),-> index idx_age (age)-> )engineinnodb charsetutf8mb4;insert into user(name,age) values(张三,…

使用Aspose.Slides 控件,在线将 ODP 转换为 PPT

OpenOffice 等开源生产力工具有其用途。但如果您希望在线将 ODP 转换为 PPT,您很可能已经确定 Microsoft PowerPoint 的专有 PPT 格式和平台比 OpenOffice ODP 更适合您的需求。 本文的第一部分重点介绍在线将 ODP 转换为 PPT 的快速方法。第二部分探讨涉及C#应用程…

【flink】状态清理策略(TTL)

flink的keyed state是有有效期(TTL)的,使用和说明在官网描述的篇幅也比较多,对于三种清理策略没有进行横向对比得很清晰。 全量快照清理(FULL_STATE_SCAN_SNAPSHOT)增量清理(INCREMENTAL_CLEANUP)rocksdb压缩清理(ROCKSDB_COMPACTION_FILTER) 注意&…

柔性屏的性能、使用、维护

柔性屏是一种新型的显示技术,相比传统刚性屏幕,具有许多独特的优势。以下是关于柔性屏的性能、使用和维护的详细介绍: 一、性能 弯曲性:柔性屏幕可以轻松弯曲、卷曲或弯折,适应不同的表面形状,如弧形墙面、…

二维码智慧门牌管理系统升级:安全与便捷并存

文章目录 前言一、系统升级与用户操作记录二、展望与智能门禁未来三、智能科技为未来铺路 前言 科技与门禁系统演进 随着科技的飞速发展,智能门牌系统成为建筑物不可或缺的一部分。其中,二维码智慧门牌管理系统以其独特优势逐渐受到关注。它不仅提升了出…

[每周一更]-(第38期):Go常见的操作消息队列

在Go语言中,常见的消息队列有以下几种: RabbitMQ:RabbitMQ是一个开源的AMQP(高级消息队列协议)消息代理软件,用于支持多种编程语言,包括Go语言。RabbitMQ提供了可靠的消息传递机制和灵活的路由…

职场利器-软考高级、PMP、CKA/CKS/CKAD备考

1、【软考高级】信息系统项目管理师 全国计算机技术与软件专业技术资格(水平)考试网上报名平台http://bm.ruankao.org.cn/sign/welcome 模拟作答系统230747 第一次裸考 考试成绩查询 三科均未通过 软考考试多少分通过? ​​​​​​​ 软考高级,它的考试科目是《…

WebAssembly 的魅力:高效、安全、跨平台(下)

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

Redis连接不上:主机无法连接虚拟机中的redis服务

1、报错信息 2023-12-22 16:01:25 : Connection: redis-dev > connection failed 2023-12-22 16:01:25 : Click on tree item: 0 2023-12-22 16:01:25 : Connection: Connection error: Connection refused 2、解决 主机<本地>无法连接虚拟机中的redis服务 首先…

Centos系统升级gcc版本

自己环境的gcc版本太低&#xff0c;影响使用SAN全家桶进行内存泄露检查 当前环境gcc版本查看 gcc --version 进行升级&#xff1a; 1、安装EPEL存储库 yum install epel-release -y 2、确保系统已经更新到最新版本 yum update -y 3、安装GCC编译器及其相关工具包 yum g…

嵌入式系统与物联网:智能化、互联世界的构建者

随着科技的飞速发展&#xff0c;我们的生活、工作以及整个社会结构都经历着深刻的变革。在这个过程中&#xff0c;嵌入式系统和物联网&#xff08;IoT&#xff09;技术扮演了关键的角色。本文将探讨嵌入式系统如何与物联网相互作用&#xff0c;以及它们在构建智能化、互联的世界…

引领汽车营销新趋势,3DCAT实时云渲染助力汽车三维可视化

当前&#xff0c;汽车产业发展正从电动化的上半场&#xff0c;向智能化的下半场迈进。除了车机技术体验的智能化之外&#xff0c;观车体验的智能化也不容忽视。 这是因为&#xff0c;随着数字化、智能化、个性化的趋势&#xff0c;消费者对汽车的需求和期待也越来越高&#xf…

金蝶Apusic应用服务器 loadTree JNDI注入漏洞复现(QVD-2023-48297)

0x01 产品简介 金蝶Apusic应用服务器是一款企业级应用服务器,支持Java EE技术,适用于各种商业环境。 0x02 漏洞概述 由于金蝶Apusic应用服务器权限验证不当,导致攻击者可以向loadTree接口执行JNDI注入,造成远程代码执行漏洞。利用该漏洞需低版本JDK。(漏洞比较旧,8月份…

循环渲染ForEach

目录 1、接口说明 2、键值生成规则 3、组件创建规则 3.1、首次渲染 3.2、非首次渲染 4、使用场景 4.1、数据源不变 4.2、数据源组项发生变化 4.3、数据源数组项子属性变化 5、反例 5.1、渲染结果非预期 5.2、渲染性能降低 Android开发中我们有ListView组件、GridVi…

git入门以及如何推送代码到云端

Gitee&#xff08;码云&#xff09;是开源中国于2013年推出的基于Git的代码托管平台、企业级研发效能平台&#xff0c;提供中国本土化的代码托管服务。 地址&#xff1a; Gitee - 基于 Git 的代码托管和研发协作平台 步骤1&#xff1a;创建远程仓库 在Gitee上创建一个新的远…

【计算机视觉中的多视图几何系列】深入浅出理解针孔相机模型

温故而知新&#xff0c;可以为师矣&#xff01; 一、参考资料 《计算机视觉中的多视图几何-第五章》-Richard Hartley, Andrew Zisserman. 二、针孔模型相关介绍 1. 重要概念 1.1 投影中心/摄像机中心/光心 投影中心称为摄像机中心&#xff0c;也称为光心。投影中心位于一…

ubuntu20.04下安装pcl_ubuntu安装pcl

pcl点云数据库&#xff0c;用来进行3D信息的获取与处理&#xff0c;和opencv相比较&#xff0c;opencv是用来处理二维信息&#xff0c;他是学术界与工业界针对点云最全的库&#xff0c;且网络上相关的资料很多。以下是pcl的安装步骤以及遇到的问题。 提前说明&#xff0c;本人…

uniapp实战 -- 个人信息维护(含选择图片 uni.chooseMedia,上传文件 uni.uploadFile,获取和更新表单数据)

效果预览 相关代码 页面–我的 src\pages\my\my.vue <!-- 个人资料 --><view class"profile" :style"{ paddingTop: safeAreaInsets!.top px }"><!-- 情况1&#xff1a;已登录 --><view class"overview" v-if"membe…

Nature 新研究发布,GPT 驱动的机器人化学家能够自行设计和进行实验,这对科研意味着什么?

文章目录 前言揭秘Coscientist不到四分钟&#xff0c;设计并改进了程序能力越大&#xff0c;责任越大 前言 有消息称&#xff0c;AI 大模型 “化学家” 登 Nature 能够自制阿司匹林、对乙酰氨基酚、布洛芬&#xff0c;甚至连复杂的钯催化交叉偶联反应&#xff0c;也能完成。 …

HarmonyOS - macOS 上搭建 鸿蒙开发环境

文章目录 安装 DevEco第一个 App1、工程基本信息设置2、安装设备3、运行工程 安装 DevEco 软件下载地址&#xff1a; https://developer.harmonyos.com/cn/develop/deveco-studio 今天我下载 DevEco Studio 3.1.1 Release - Mac 版本 解压后是一个 dmg 文件&#xff08;也不必…