微信小程序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.hqwc.cn/news/293946.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python并行计算和分布式任务全面指南

更多Python学习内容:ipengtao.com 大家好,我是彭涛,今天为大家分享 Python并行计算和分布式任务全面指南。全文2900字,阅读大约8分钟 并发编程是现代软件开发中不可或缺的一部分,它允许程序同时执行多个任务&#xff0…

为实体服务器配置Ubuntu

简介 我们在使用虚拟机时,直接在网上找到镜像然后下载到本地,在VMware创建实例时将该iso文件作为镜像源然后进行基础配置就可以轻松安装配置好Linux虚拟机。 在为实体服务器安装Linux系统,同样的,我们也需要镜像源(即…

听GPT 讲Rust源代码--src/tools(23)

File: rust/src/tools/clippy/rustc_tools_util/src/lib.rs 在Rust源代码中,rust/src/tools/clippy/rustc_tools_util/src/lib.rs文件的作用是为Clippy提供了一些实用工具和辅助函数。 该文件中定义了VersionInfo结构体,它有三个字段,分别为m…

网络调优,部署内网备份冗余和负载分担---实验

目录 网络调优,部署内网备份冗余和负载分担---实验 拓扑 需求 配置步骤: 配置命令: 网络调优,部署内网备份冗余和负载分担---实验 拓扑 需求 主机获取IP地址,访问WEB服务器,WEB服务器网关在SW5上SW5作为VLAN10,V…

C语言——最古老的树

归纳编程学习的感悟, 记录奋斗路上的点滴, 希望能帮到一样刻苦的你! 如有不足欢迎指正! 共同学习交流! 🌎欢迎各位→点赞 👍 收藏⭐ 留言​📝 缺乏明确的目标,一生将庸庸…

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

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

2023亚马逊云科技re:Invent用Amazon Q打造你的知识库

随着ChatGPT的问世,我们迎来了许多创新和变革的机会。一年一度的亚马逊云科技大会re:Invent也带来了许多前言的技术,其中亚马逊云科技CEO Adam Selipsky在2023亚马逊云科技re:Invent大会中重磅推出Amazon Q,这预示着生成式AI的又一个里程碑。…

Canal使用详解

Canal介绍 Canal是阿里巴巴开发的MySQL binlog增量订阅&消费组件,Canal是基于MySQL二进制日志的高性能数据同步系统。在阿里巴巴集团中被广泛使用,以提供可靠的低延迟增量数据管道。Canal Server能够解析MySQL Binlog并订阅数据更改,而C…

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

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

Centos系统升级gcc版本

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

python+django教学质量评价系统o8x1z

本基于web的在线教学质量评价系统的设计与实现有管理员,教师,督导,学生一共四个角色。管理员功能有个人中心,学生管理,教师管理,督导管理,学生评价管理,课程信息管理,学生…

nodejs+vue+ElementUi医院预约挂号系统3e3g0

本医院预约挂号系统有管理员,医生和用户。该系统将采用B/S结构模式,使用Vue和ElementUI框架搭建前端页面,后端使用Nodejs来搭建服务器,并使用MySQL,通过axios完成前后端的交互 管理员功能有个人中心,用户管…