@

今天的API的封装,我们拿WX小程序开发中,对它的API (wx.request)对这个进行一个二次封装。传统的小程序的网络请求,在我们的请求需求过多的时候,就会显得杂乱,和难维护。带着一开时难,后来维护爽的态度让我们来给他封装一下。



让我们开始

一,让我们看一下项目目录



让我们建立一个api的文件夹,来存放我们的封装逻辑,文件夹中建立三个JS文件

二,让我们熟悉一下这三个文件目的(文件名你看着办)

	 1,env.js文件 这个文件设置我们的公用(复用)的网络接口
	// 设置公用访问url,环境地址
module.exports={
// 可以添加开发环境url ,线上环境url,测试环境url
dev:{
baseUrl: "请求地址"
}
}
  	2,connector.js 这个文件是二次封装的逻辑文件
// 引入公用url env
const {baseUrl}=require('./env').dev //这里用的是ES6的写法
module.exports={
// 二次封装wx.request
request:(url,method,data,state)=>{
// url: 为网络接口后面要拼接的动态路径
//method :为请求方式
//data:为要传递的参数 object类型
//state:这里我是为了添加不添加子域名用的默认给了一个true
let _url=`${baseUrl}/${state? "子域名":""}${url}` //子域名按需添加
// 我们需要通过构建promise来将接受的数据导出
return new Promise((resolve,reject)=>{
wx.request({
url:_url,
data:data,
method:method,
header:{
"content-type":"appLication/x-www-form-urlencoded"
},
//成功回调
success:(res)=>{
if(res.data.code===0){
//成功抛出
resolve(res.data)
}
},
//失败回调
fail:()=>{
//失败抛出
reject("请求失败")
}
})
})
}
}
	3,api.js 我们所使用接口的业务封装
	// 引入封装请求
const {request}=require('./connector') // 基于业务封装
module.exports={
// 封装商品列表
gitGoodsList:(接收参数)=>{
return request("/shop/goods/list","get",{参数},true)
},
//项目导航数据
getNavList:()=>{
return request('/shop/goods/category/all',"post",{},true)
},
//项目轮播图数据
getSwiper:()=>{
return request('/banner/list',"get",{},true)
},
}

三,页面js中如何使用

这里我拿个index.js文件中使用举例

    // nav导航栏
getNavList({传参}).then(res => {
this.setData({
nav: res.data
})
})
// 商品
gitGoodsList().then(res => {
this.setData({
goods: res.data.splice(this.data.count, this.data.page)
})
})
// 轮播图
getSwiper().then(res => {
this.setData({
swiper: res.data
})
})
	根据自己的使用场景,或事件,这里我是写道了onLoad的生命函数执行的

优点:封装的好处大家都知道,代码的模块化的集中管理,便于我们去维护

欢迎留言讨论

微信小程序API接口封装的更多相关文章

  1. 微信小程序红包开发 小程序发红包 开发过程中遇到的坑 微信小程序红包接口的

    微信小程序红包开发 小程序发红包 开发过程中遇到的坑 微信小程序红包接口的   最近公司在开发一个小程序红包系统,客户抢到红包需要提现.也就是通过小程序来给用户发红包. 小程序如何来发红包呢?于是我想 ...

  2. 微信小程序api拦截器

    微信小程序api拦截器 完美兼容原生小程序项目 完美兼用小程序api的原本调用方式,无痛迁移 小程序api全Promise化 和axios一样的请求方式 小程序api自定义拦截调用参数和返回结果 强大 ...

  3. 微信小程序 API

    微信小程序 API https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html demo https://de ...

  4. 微信小程序API交互的自定义封装

    目录 1,起因 2,优化成果 3,实现思路 4,完整代码 1,起因 哪天,正在蚂蚁森林疯狂偷能量的我被boss叫过去,告知我司要做一个线上直播公开课功能的微信小程序,博主第一次写小程序,复习了下文档, ...

  5. 微信小程序Http高级封装 es6 promise

    公司突然要开放微信小程序,持续蒙蔽的我还不知道小程序是个什么玩意. 于是上网查了一下,就开始着手开发..... 首先开发客户端的东西,都有个共同点,那就是  数据请求! 看了下小程序的请求方式大概和a ...

  6. 微信小程序支付接口之Django后台

    本文链接:https://blog.csdn.net/qq_41860162/article/details/89098694Python3-django-微信小程序支付接口调用工具类生成一系列微信官 ...

  7. 微信小程序之----接口调用方式

    最近开发了一个微信小程序版的任务管理系统,在向Java后台发送接口时遇到了一些问题,在这里做一个简单的总结. 官方接口 官方给出的接口叫做wx.request,请求方式比较简单,下面是官网给出的请求实 ...

  8. 小程序红包开发跳坑记 微信小程序红包接口开发过程中遇到的问题 微信小程序红包开发

    现在做小程序的越来越多,商家推广也是一个瓶颈,谁不发点红包,都很难找到人来用你的微信小程序了.于是不管你开发什么小程序功能,你或多或少都要用到小程序来发红包吧.  我们自己之前做公众号发红包,做了两三 ...

  9. 微信小程序 API 基础

    其实还有一些组件,没有提,因为那些组件跟 API 的功能差不多,API 可能比他会更好一点: 具体可见官方文档 基础: 判断接口是否可用:wx.canIUse(a) a 代表:接口名字 返回值:布尔 ...

随机推荐

  1. 基于AM3352/AM3354/AM3358/AM3359的Linux 开发环境搭建(上)

    遇到不少人新手小白问,前辈如何搭建一个优良的Linux 开发环境?之前一直都是在用win开发,现在想要尝试用Linux做开发等等一系列的问题.开源一直是给电子行业工作者提供了一种向技术更深处进发的机遇 ...

  2. P6378-[PA2010]Riddle【2-SAT】

    正题 题目链接:https://www.luogu.com.cn/problem/P6378 题目大意 给出\(n\)个点\(m\)条边的一张无向图,图中有\(k\)种颜色的点. 要求每种颜色选择一个 ...

  3. Python读取ini配置文件(接口自动测试必备)

    前言 大家应该接触过.ini格式的配置文件.配置文件就是把一些配置相关信息提取出去来进行单独管理,如果以后有变动只需改配置文件,无需修改代码. 特别是后续做自动化的测试,代码和数据分享,进行管理.比如 ...

  4. WPF进阶技巧和实战02-布局

    窗体 无边框 窗体无边框(最大化及标题位置)WindowStyle="None" 窗体透明 AllowsTransparency="True",必须设置窗体无边 ...

  5. NOIP 模拟二 考试总结

    SDOI2015 排序 今天看到这道题,没有一点思路,暴力都没的打...还是理解错题意了,操作不同位置不是说改不同的区间,而是不同操作的顺序...考场上如果知道这个的话最少暴力拿一半啊,因为正解本来就 ...

  6. 7.JVM调优-方法区,堆,栈调优详解

    通常我们都知道在堆空间新生代Eden区满了,会触发minor GC, 在老年代满了会触发full GC, 触发full GC会导致Stop The World, 那你们知道还有一个区域满了一会触发Fu ...

  7. $hadow$ocks与Privoxy基础原理

    $hadow$ocks与Privoxy基础原理 以下所有提到$hadow$ocks的均以ss指代 为什么要用ss呢? 在早期(如今绝大多数也是),对于互联网的访问流程是及其简单的:浏览器(或其他客户端 ...

  8. cadvisor+prometheus+alertmanager+grafana完成容器化监控告警(一)

    一.概况 1.拓扑图 2.名词解释 Grafana 可视化监控容器运行情况 Prometheus: 开源系统监视和警报工具包 Alertmanager 一个独立的组件,负责接收并处理来自Prometh ...

  9. Java初步学习——2021.09.23每日报告,第三周周四

    (1)今天做了什么: (2)明天准备做什么? (3)遇到的问题,如何解决? 学习数组,编写了一个随机选牌的代码.自己最开始一直想只设置一个字符串数组,利用随机数来输出,但那样对字符串赋值会比较麻烦.可 ...

  10. Azure Tips 第一期: Azure 中的安全监视工具,数据存储, 动态数据屏蔽以及资源部署

    # 1 Azure 中的安全监视工具 微软 Azure 云提供以下监控工具,可用于观察操作和检测异常行为. Azure 安全中心 Azure 安全中心是一个统一的基础结构安全管理系统,可以增强数据中心 ...