微信小程序封装wx.request方法

 

wx.request 是一个异步的方法

success回调函数的作用域发生了改变，所以this的指向不是当前函数

两种方法可以改变this的指向：

一种通过中间变量that。另一种通过ES6箭头函数改变this作用域

使用 promise,promise可以解决异步嵌套的问题，简单的异步请求可以不使用promise

promise.then((res)=>{

console.log(res)

});

 

在微信小程序中最好把常用的 wx.request请求封装起来，把请求url根地址储存到config.js里,在末尾用export导出这个对象

接着在utils文件夹新建一个公共的HTTP脚本文件:http.js,头部引用

定义一个http类，里面有个方法实例方法request,方法传递了一个参数对象，保存了wx.request请求所需要的params

 

在这个类的底部定义一个私有方法

接着定义一些错误码来显示具体请求失败时的错误

导出这个HTTP类

 

到此为止http模块编写完毕,调用方法如下图：在url后直接跟baseurl后面的地址

接着进一步完善，在根目录新建models文件夹，新建Classic.js

在里面定义一个class类继承HTTP，里面有个getLast方法获得最近的期刊

接着把classic头部的引用路径改写，这样就可以直接使用classic.getLast方法,在getlast的回调方法里绑定数据到classicData上，除了setData里的数据，在data里定义的数据也可以直接在在页面使用{{}}绑定数据，setData用作数据更新

 

在组件文件的wxml文件里把classicData数据传递进去

 

 

 

点击点赞按钮也应该向服务器发送请求，接着完成这个业务：

 

在外部页面调用的组件标签上绑定的事件并不能获取组件内部想传递的一些状态,所以需要自定义指令把需要的状态保存下来：

 

 

把标签的bind:tap改成自己定义的bind:like

在onLike函数中用event.detail.behavior获取当前点击的状态

有了like或者cancel状态就可以在like.js引入HTTP模块，发起请求根据变量来访问不同的api进行点赞或者取消，还需要期刊ID和期刊类目，通过参数传递进去

在页面实例化

 传递3个参数（当前状态，点赞对象，点赞类型）完成点赞操作

 

到此为止第一个点赞组件的功能就完成了

 

 

转载于:https://www.cnblogs.com/rmty/p/10905859.html