微信小程序接口封装、原生接口封装、request、promise封装
相信大家在做微信小程序的时候会有很多地方需要调用接口,就和pc以及手机端一样,多个页面多次调用会有很多状态,那为了节省大家的开发时间就会需要给请求的接口做一些简单封装,便于开发,在这里我用了两个js,一个js封装的是方法名,另外一个是接口名,统一管理
下面这个是统一的接口方法封装
- const baseURL = "接口名";
- const request = params => {
- const token = wx.getStorageSync("token").token;
- return new Promise((resolve, reject) => {
- wx.showLoading();
- wx.request({
- url: baseURL + params.url,
- data: params.data,
- method: params.method,
- header: {
- 'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
- token: token
- },
- success(res) {
- const pages = getCurrentPages();
- // const app = getApp();
- if (res.statusCode === 200) {
- if (res.data.code === 200) {
- resolve(res.data);
- } else if (res.data.code === 401) {
- wx.navigateTo({
- url: '/pages/login/index',
- })
- } else {
- if (res.data.code == 1104) {
- wx.clearStorageSync()
- wx.redirectTo({
- url: '/pages/login/index',
- })
- } else {
- reject(res.data);
- }
- }
- }
- },
- fail(err) {
- reject(err);
- },
- complete() {
- wx.hideLoading();
- }
- });
- });
- };
- const _upload = (filePath, type) => {
- const token = wx.getStorageSync("token").access_token;
- return new Promise((resolve, reject) => {
- wx.showLoading();
- wx.uploadFile({
- url: baseURL + "upload_file", //仅为示例,非真实的接口地址
- filePath,
- name: "file",
- header: {
- authorization: token ? "Bearer " + token : undefined
- },
- formData: {
- type
- },
- success(res) {
- resolve(JSON.parse(res.data));
- },
- fail(err) {
- reject(err);
- },
- complete() {
- wx.hideLoading();
- }
- });
- });
- };
- const _get = (url, data) => {
- return request({
- url,
- data,
- method: "GET"
- });
- };
- const _post = (url, data) => {
- return request({
- url,
- data,
- method: "POST"
- });
- };
- const _put = (url, data) => {
- return request({
- url,
- data,
- method: "PUT"
- });
- };
- const _delete = (url, data) => {
- return request({
- url,
- data,
- method: "DELETE"
- });
- };
- module.exports = {
- baseURL,
- _get,
- _post,
- _put,
- _delete,
- _upload
- };
下面这个是统一的接口管理
- import { _get, _post, _put, _delete, _upload } from "./request";
- // 图片上传
- const getUploadImg = data => {
- return _post("接口名", data);
- };
- module.exports = {
- getUploadImg
- };
封装的比较简单粗暴,不过通俗易懂
使用的时候直接在页面引入就可以
微信小程序接口封装、原生接口封装、request、promise封装的更多相关文章
- 微信小程序的Web API接口设计及常见接口实现
微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,通过小程序的请求Web API 平台获取JSON数据后,可以在小程序界面上进行数据的动态展示.在数据的关键 一环中,我们 ...
- 记录一次用宝塔部署微信小程序Node.js后端接口代码的详细过程
一直忙着写毕设,上一次写博客还是元旦,大半年过去了.... 后面会不断分享各种新项目的源码与技术.欢迎关注一起学习哈! 记录一次部署微信小程序Node.js后端接口代码的详细过程,使用宝塔来部署. 我 ...
- 微信小程序(六)-项目实例(原生框架 MINA基配搭建)==01-头搜索框tabbar
项目实例(原生框架 MINA) 1.新建小程序项目 1.用自已的小程序APPID 2.清除整理项目中初建默认无关的代码 1.app.json 中删除logs,同时删除pages下的losgs文件夹 2 ...
- 微信小程序(七)-项目实例(原生框架 MINA转云开发)==02-云开发-配置
云开发:1.就是用云函数的型式来使用云存储和云数据库完成各种操作! 2.只关注调什么函数,完成什么功能即可,无需关心HTTP请求哪一套! 3.此模式不代表没有服务器,只是部署在云环境中 ...
- 整合微信小程序的Web API接口层的架构设计
在我前面有很多篇随笔介绍了Web API 接口层的架构设计,以及对微信公众号.企业号.小程序等模块的分类划分.例如在<C#开发微信门户及应用(43)--微信各个项目模块的定义和相互关系>介 ...
- 原创:微信小程序调用PHP后台接口,解析纯html文本
---效果图片预览--- 1.微信js动态传参:wx.request({ url: 'https://m.****.com/index.php/Home/Xiaoxxf/activ ...
- 微信小程序的ajax数据请求wx.request
微信小程序的ajax数据请求,很多同学找不到api在哪个位置,这里单独把小程序的ajax请求给列出来,微信小程序的请求就是wx.request这个api,wx.request(一些对象参数),微信小程 ...
- 微信小程序开发——列表分页上拉加载封装实现(订单列表为例,订单状态改变后刷新列表滚动位置不变)
业务需求: 业务需求是给订单列表添加分页功能,也就是上拉加载这种每次只请求加载固定数量的数据. 需求分析: 对业务来说就是简单的分页上拉加载,但是对于技术实现来说,除了要处理分页数据的累加加载,还要处 ...
- 微信小程序---客服消息接口调用,拿来即用
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 如果对你有帮助的话麻烦点个[推荐]~最好还可以follow一下我的GitHub~感谢观看! 在 ...
- 微信小程序(八)-项目实例(原生框架 MINA转云开发)==03-云开发-数据库
云数据库 云数据库开发文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database.html 1.新建云数据库( ...
随机推荐
- Winner Winner【模拟、位运算】
Winner Winner 题目链接(点击) 题目描述 The FZU Code Carnival is a programming competetion hosted by the ACM-ICP ...
- Floating-Point Hazard【求导公式】
Floating-Point Hazard 题目链接(点击) 题目描述 Given the value of low, high you will have to find the value of ...
- 不适合使用Mycat的场景
1.非分片字段查询 Mycat中的路由结果是通过分片字段和分片方法来确定的.例如下图中的一个Mycat分库方案: 根据 tt_waybill 表的 id 字段来进行分片 分片方法为 id 值取 3 的 ...
- Spring系列.事务管理
Spring提供了一致的事务管理抽象.这个抽象是Spring最重要的抽象之一, 它有如下的优点: 为不同的事务API提供一致的编程模型,如JTA.JDBC.Hibernate和MyBatis数据库层 ...
- demo项目开发(Python+flask+mysql+redis只包含后端接口)
[demo项目开发需求] 用户信息管理,可以注册.登录.添加用户.删除用户 注册:任何用户可以注册,对用户提交的注册信息进行校验,返回对应的信息,其中: 用户名:必填,唯一 密码:必填,只能6-12位 ...
- 一个非侵入的Go事务管理库——如何使用
在文章"清晰架构(Clean Architecture)的Go微服务: 事物管理"中,我谈到了如何在清晰架构中实现非侵入的事务管理. 它允许你把事务代码与业务逻辑代码分开,并且让你 ...
- Flutter学习笔记(38)--自定义控件之组合控件
如需转载,请注明出处:Flutter学习笔记(38)--自定义控件之组合控件 在开始之前想先写点其他的,emm...就是今天在学习到自定义控件的时候,由于自定义控件这块一直是我的短板,无论是Andro ...
- openstack Rocky 社区版部署1.4 安装数据库
在控制节点安装mariadb,也可以单独服务器安装数据库,假如多个控制节点就在第一台安装数据库,计算节点不需要安装. 1 安装mariadb相关安装包. yum install mariadb mar ...
- Bash 脚本编程的一些高级用法
概述 偶然间发现 man bash 上其实详细讲解了 shell 编程的语法,包括一些很少用却很实用的高级语法.就像发现了宝藏的孩子,兴奋莫名.于是参考man bash,结合自己的理解,整理出了这篇文 ...
- 高速缓存一致性协议MESI与内存屏障
一.CPU高速缓存简单介绍 CPU高速缓存机制的引入,主要是为了解决CPU越来越快的运行速度与相对较慢的主存访问速度的矛盾.CPU中的寄存器数量有限,在执行内存寻址指令时,经常需要从内存中读取指令所需 ...