微信小程序promise封装

一. 在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.mfbz.cn/a/263429.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

软文营销的重要性,媒介盒子为你解答

信息茧房环立且用户注意力稀缺的时代下,品牌方唯有在内容上精耕细作才能吸引用户。软文营销能够帮助公司吸引流量,建立与消费者的信任联系,同时增加转化并产生更多的业务。接下来媒介盒子就和大家聊聊:软文营销的重要性。 一、 可…

【论文阅读】FreeU: Free Lunch in Diffusion U-Net

FreeU: 无需训练直接提升扩散模型生成效果。 paper:https://arxiv.org/abs/2309.11497 code:GitHub - ChenyangSi/FreeU: FreeU: Free Lunch in Diffusion U-Net 1. 介绍 贡献: •研究并揭示了U-Net架构在扩散模型中去噪的潜力&#xff0…

【小白专用】php pdo方式连接sqlserver 设置方法 更新23.12.21

windows系统的拓展相对来说比较好安装&#xff0c;直接下载对应的dll文件&#xff0c;修改php.ini配置文件即可。 添加PHP对SQL SERVER的支持 1.新建PHP 文件&#xff0c;输入内容&#xff1a; <?php echo phpinfo(); ?> 2.运行后&#xff0c;可以查看到如下数据&…

Linux 磁盘空间占满故障解决方法

故障排查&#xff1a; 使用命令查看磁盘使用量 # 使用人类可读的格式(预设值是不加这个选项的...) df -h # --inodes 列出 inode 资讯&#xff0c;不列出已使用 block df -i # 查看当前目录下各个文件及目录占用空间大小 du -sh / 情况一&#xff1a;一般磁盘空间满了&a…

106 uni-app 小程序之巨坑 not found path,not found methods v-for渲染出现报错

1.Component is not found in path 你是否像我一样&#xff0c;检查了无数遍&#xff0c;引入路径检查千万遍&#xff0c;就是没写错&#xff0c;小程序后台就是给你报错&#xff0c; 不用慌&#xff0c;心里默念&#xff1a;我不能砸电脑&#xff0c;我不能砸电脑&#xff0…

[c]超半的数

题目意思很简单&#xff0c;就是输入一组数据&#xff0c;输出出现次数过半的数 根据这个题我们也可以写出另一个题&#xff0c;&#xff08;题2&#xff09;&#xff08;统计一组数据中各个数出现的次数&#xff09; 下面附上两个题代码 题1&#xff1a; #include<stdio.…

接口响应过慢怎样排查?

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 服务变慢服务器全局慢包括cpu 慢&#xff0c;内存慢&#xff0c;io/磁盘慢&#xff0c;io/网络慢。 服务器局部慢指得是发现某一个或者多个服务很慢。 1.全局查询思…

Vue实现rem自适应布局,无需安装插件,代码简单

&#x1f935; 作者&#xff1a;coderYYY &#x1f9d1; 个人简介&#xff1a;前端程序媛&#xff0c;目前主攻web前端&#xff0c;后端辅助&#xff0c;其他技术知识也会偶尔分享&#x1f340;欢迎和我一起交流&#xff01;&#x1f680;&#xff08;评论和私信一般会回&#…

Jenkins自动化构建打包,部署

1.环境准备 上传jdk&#xff0c;maven和tomcat的包&#xff0c;解压到/usr/local下并配置环境变量。 配置jdk [rootserver04 ~]# vim /etc/profile.d/java.sh JAVA_HOME/usr/local/java export PATH$JAVA_HOME/bin:$PATH##加载环境变量 [rootserver04 ~]# source /etc/profi…

电影《名侦探柯南:黑铁的鱼影》观后感

上周看了电影《名侦探柯南&#xff1a;黑铁的鱼影》,整体故事的话,就是柯南他们团队一起去岛屿去上参观&#xff0c;“正好”碰上了“海上信标案件”&#xff0c;在柯南的电影里&#xff0c;用“正好”多少有些反讽的意味&#xff0c;因为柯南好像走到哪&#xff0c;都正好碰到…

FFmpeg 简单文档

一、播放器框架 常用音视频术语 容器&#xff0f;文件&#xff08;Conainer/File&#xff09;&#xff1a;即特定格式的多媒体文件&#xff0c;比如mp4、flv、mkv等。媒体流&#xff08;Stream&#xff09;&#xff1a;表示时间轴上的一段连续数据&#xff0c;如一段声音数据、…

键盘失灵?别慌!三招帮你调出电脑软键盘

在电脑使用中&#xff0c;我们有时候需要输入文字&#xff0c;但可能会遇到键盘突然失灵的情况。这时&#xff0c;我们可以使用电脑自带的软键盘来解决问题。本文将介绍如何调出电脑软键盘&#xff0c;以便在需要时进行文字输入。 下面以Windows10系统电脑调出软键盘为例进行演…

如何将采购时间从几天缩短为几小时?

从事采购工作时&#xff0c;采购需要多长时间是面临的常见挑战之一。 采购是供应链中的一个环节&#xff0c;大家都不想看到整个流程被拖慢&#xff0c;但很多时候&#xff0c;事情往往向超出控制范围的方向发展。不过&#xff0c;企业可以通过多种方式简化采购和管理整个采购…

红队打靶练习:ESCALATE_LINUX: 1

信息收集 1、arp ┌──(root㉿ru)-[~/kali] └─# arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:69:c7:bf, IPv4: 192.168.12.128 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.12.1 00:50:56:c0:00:08 …

Jenkins持续集成自动化测试

执行集成构建 持续&#xff0c;自动地构建&测试软件项目代码管理&#xff08;git/svn&#xff09;>编译&#xff08;maven/ant/gradle&#xff09;>打包>测试环境部署>自动化测试 研发体系中的迭代流程 1 源码分支管理&#xff1a; git或者svn, 将不同开发编…

MySQL 分表真的能提高查询效率?

背景 首先我们以InnoDB引擎&#xff0c;BTree 3层为例。我们需要先了解几个知识点&#xff1a;页的概念、InnoDB数据的读取方式、什么是树搜索&#xff1f;、一次查询花费的I/O次数&#xff0c;跨页查询。 页的概念 索引树的页&#xff08;page&#xff09;是指存储索引数据…

python可以做小程序研发嘛,python能做微信小程序吗

大家好&#xff0c;给大家分享一下python可以做微信小程序开发吗&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; 大家好&#xff0c;给大家分享一下用python编写一个小程序&#xff0c;很多人还不知道这一点。下面详细解释一下用python代码…

计算机毕业设计-----JSP在线奶茶店销售网站平台

项目介绍 本系统分为前后台&#xff0c;分为普通用户和管理员两种角色&#xff1b; 管理员角色包含以下功能&#xff1a; 管理员登录,用户管理,分类管理,奶茶信息管理,订单管理,新闻管理等功能。 用户角色包含以下功能&#xff1a; 用户登录,按分类查看,查看商品详情,加入购…

BWS2000倾角传感器c++测试代码_时间延迟与时间同步问题【3】

详见昨天做的测试代码&#xff0c;代码网址&#xff1a;BWS2000倾角传感器c测试代码【2】-CSDN博客文章浏览阅读268次&#xff0c;点赞7次&#xff0c;收藏8次。倾角传感器测试与编写思路https://blog.csdn.net/m0_47489229/article/details/135128748 问题一&#xff1a;新的…
最新文章