相信大家在做微信小程序的时候会有很多地方需要调用接口,就和pc以及手机端一样,多个页面多次调用会有很多状态,那为了节省大家的开发时间就会需要给请求的接口做一些简单封装,便于开发,在这里我用了两个js,一个js封装的是方法名,另外一个是接口名,统一管理

下面这个是统一的接口方法封装

  1. const baseURL = "接口名";
  2. const request = params => {
  3. const token = wx.getStorageSync("token").token;
  4. return new Promise((resolve, reject) => {
  5. wx.showLoading();
  6. wx.request({
  7. url: baseURL + params.url,
  8. data: params.data,
  9. method: params.method,
  10. header: {
  11. 'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
  12. token: token
  13. },
  14. success(res) {
  15. const pages = getCurrentPages();
  16. // const app = getApp();
  17. if (res.statusCode === 200) {
  18. if (res.data.code === 200) {
  19. resolve(res.data);
  20. } else if (res.data.code === 401) {
  21. wx.navigateTo({
  22. url: '/pages/login/index',
  23. })
  24. } else {
  25. if (res.data.code == 1104) {
  26. wx.clearStorageSync()
  27. wx.redirectTo({
  28. url: '/pages/login/index',
  29. })
  30. } else {
  31. reject(res.data);
  32. }
  33. }
  34. }
  35. },
  36. fail(err) {
  37. reject(err);
  38. },
  39. complete() {
  40. wx.hideLoading();
  41. }
  42. });
  43. });
  44. };
  45. const _upload = (filePath, type) => {
  46. const token = wx.getStorageSync("token").access_token;
  47. return new Promise((resolve, reject) => {
  48. wx.showLoading();
  49. wx.uploadFile({
  50. url: baseURL + "upload_file", //仅为示例,非真实的接口地址
  51. filePath,
  52. name: "file",
  53. header: {
  54. authorization: token ? "Bearer " + token : undefined
  55. },
  56. formData: {
  57. type
  58. },
  59. success(res) {
  60. resolve(JSON.parse(res.data));
  61. },
  62. fail(err) {
  63. reject(err);
  64. },
  65. complete() {
  66. wx.hideLoading();
  67. }
  68. });
  69. });
  70. };
  71. const _get = (url, data) => {
  72. return request({
  73. url,
  74. data,
  75. method: "GET"
  76. });
  77. };
  78. const _post = (url, data) => {
  79. return request({
  80. url,
  81. data,
  82. method: "POST"
  83. });
  84. };
  85. const _put = (url, data) => {
  86. return request({
  87. url,
  88. data,
  89. method: "PUT"
  90. });
  91. };
  92. const _delete = (url, data) => {
  93. return request({
  94. url,
  95. data,
  96. method: "DELETE"
  97. });
  98. };
  99. module.exports = {
  100. baseURL,
  101. _get,
  102. _post,
  103. _put,
  104. _delete,
  105. _upload
  106. };

下面这个是统一的接口管理

  1. import { _get, _post, _put, _delete, _upload } from "./request";
  2.  
  3. // 图片上传
  4. const getUploadImg = data => {
  5. return _post("接口名", data);
  6. };
  7. module.exports = {
  8. getUploadImg
  9. };

封装的比较简单粗暴,不过通俗易懂
使用的时候直接在页面引入就可以

微信小程序接口封装、原生接口封装、request、promise封装的更多相关文章

  1. 微信小程序的Web API接口设计及常见接口实现

    微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,通过小程序的请求Web API 平台获取JSON数据后,可以在小程序界面上进行数据的动态展示.在数据的关键 一环中,我们 ...

  2. 记录一次用宝塔部署微信小程序Node.js后端接口代码的详细过程

    一直忙着写毕设,上一次写博客还是元旦,大半年过去了.... 后面会不断分享各种新项目的源码与技术.欢迎关注一起学习哈! 记录一次部署微信小程序Node.js后端接口代码的详细过程,使用宝塔来部署. 我 ...

  3. 微信小程序(六)-项目实例(原生框架 MINA基配搭建)==01-头搜索框tabbar

    项目实例(原生框架 MINA) 1.新建小程序项目 1.用自已的小程序APPID 2.清除整理项目中初建默认无关的代码 1.app.json 中删除logs,同时删除pages下的losgs文件夹 2 ...

  4. 微信小程序(七)-项目实例(原生框架 MINA转云开发)==02-云开发-配置

    云开发:1.就是用云函数的型式来使用云存储和云数据库完成各种操作!     2.只关注调什么函数,完成什么功能即可,无需关心HTTP请求哪一套!     3.此模式不代表没有服务器,只是部署在云环境中 ...

  5. 整合微信小程序的Web API接口层的架构设计

    在我前面有很多篇随笔介绍了Web API 接口层的架构设计,以及对微信公众号.企业号.小程序等模块的分类划分.例如在<C#开发微信门户及应用(43)--微信各个项目模块的定义和相互关系>介 ...

  6. 原创:微信小程序调用PHP后台接口,解析纯html文本

    ---效果图片预览---    1.微信js动态传参:wx.request({        url: 'https://m.****.com/index.php/Home/Xiaoxxf/activ ...

  7. 微信小程序的ajax数据请求wx.request

    微信小程序的ajax数据请求,很多同学找不到api在哪个位置,这里单独把小程序的ajax请求给列出来,微信小程序的请求就是wx.request这个api,wx.request(一些对象参数),微信小程 ...

  8. 微信小程序开发——列表分页上拉加载封装实现(订单列表为例,订单状态改变后刷新列表滚动位置不变)

    业务需求: 业务需求是给订单列表添加分页功能,也就是上拉加载这种每次只请求加载固定数量的数据. 需求分析: 对业务来说就是简单的分页上拉加载,但是对于技术实现来说,除了要处理分页数据的累加加载,还要处 ...

  9. 微信小程序---客服消息接口调用,拿来即用

    如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 如果对你有帮助的话麻烦点个[推荐]~最好还可以follow一下我的GitHub~感谢观看! 在 ...

  10. 微信小程序(八)-项目实例(原生框架 MINA转云开发)==03-云开发-数据库

    云数据库 云数据库开发文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database.html 1.新建云数据库( ...

随机推荐

  1. Winner Winner【模拟、位运算】

    Winner Winner 题目链接(点击) 题目描述 The FZU Code Carnival is a programming competetion hosted by the ACM-ICP ...

  2. Floating-Point Hazard【求导公式】

    Floating-Point Hazard 题目链接(点击) 题目描述 Given the value of low, high you will have to find the value of ...

  3. 不适合使用Mycat的场景

    1.非分片字段查询 Mycat中的路由结果是通过分片字段和分片方法来确定的.例如下图中的一个Mycat分库方案: 根据 tt_waybill 表的 id 字段来进行分片 分片方法为 id 值取 3 的 ...

  4. Spring系列.事务管理

    Spring提供了一致的事务管理抽象.这个抽象是Spring最重要的抽象之一, 它有如下的优点: 为不同的事务API提供一致的编程模型,如JTA.JDBC.Hibernate和MyBatis数据库层 ...

  5. demo项目开发(Python+flask+mysql+redis只包含后端接口)

    [demo项目开发需求] 用户信息管理,可以注册.登录.添加用户.删除用户 注册:任何用户可以注册,对用户提交的注册信息进行校验,返回对应的信息,其中: 用户名:必填,唯一 密码:必填,只能6-12位 ...

  6. 一个非侵入的Go事务管理库——如何使用

    在文章"清晰架构(Clean Architecture)的Go微服务: 事物管理"中,我谈到了如何在清晰架构中实现非侵入的事务管理. 它允许你把事务代码与业务逻辑代码分开,并且让你 ...

  7. Flutter学习笔记(38)--自定义控件之组合控件

    如需转载,请注明出处:Flutter学习笔记(38)--自定义控件之组合控件 在开始之前想先写点其他的,emm...就是今天在学习到自定义控件的时候,由于自定义控件这块一直是我的短板,无论是Andro ...

  8. openstack Rocky 社区版部署1.4 安装数据库

    在控制节点安装mariadb,也可以单独服务器安装数据库,假如多个控制节点就在第一台安装数据库,计算节点不需要安装. 1 安装mariadb相关安装包. yum install mariadb mar ...

  9. Bash 脚本编程的一些高级用法

    概述 偶然间发现 man bash 上其实详细讲解了 shell 编程的语法,包括一些很少用却很实用的高级语法.就像发现了宝藏的孩子,兴奋莫名.于是参考man bash,结合自己的理解,整理出了这篇文 ...

  10. 高速缓存一致性协议MESI与内存屏障

    一.CPU高速缓存简单介绍 CPU高速缓存机制的引入,主要是为了解决CPU越来越快的运行速度与相对较慢的主存访问速度的矛盾.CPU中的寄存器数量有限,在执行内存寻址指令时,经常需要从内存中读取指令所需 ...