零、回顾

在上节课我们主要介绍了观察者模式，
并据此模式实现了一个event模块，
这节课我们基础用户登录的自动整合，
尝试在wxp模块当中扩展出一个request3这样的一个接口。

一、在wxp组件中扩展实现request3接口

3.7中，
当我们单击手动开启登录的时候，
它底部有一个面板滑出。
接下来我们要实现的功能是，
如果是我们用request3去调用接口的时候，
如果发现用户没有登录，也就是没有token，
那么我们把面板自动给它呼出来，让它滑出，
滑出以后，然后用户点击按钮去登录，
登录完成以后，自动地让面板消失，
然后继续我们刚才已经停止的接口请求。
这个大概就是我们想要实现的一个功能

ilb/wxp.js

import {promisifyAll
} from 'miniprogram-api-promise';
const wxp = {}
promisifyAll(wx, wxp)// 3.6 模块化
wxp.request2 = function (args) {let token = wx.getStorageSync('token');if (token) {if (!args.header) args.header = {}args.header["Authorization"] = `Bearer ${token}`}return wxp.request(args).catch(err => console.log("err", err))
}// 3.9
wxp.request3 = function (args) {let token = wx.getStorageSync('token');if (!token) {// 没有token// 返回一个promise对象return new Promise((resolve, reject) => {// 1.唤起面板//1.1 当前页面对象//获取当前页面栈let pageStack = getCurrentPages();// 页面栈最后的一个页面就是我们当前的页面if (pageStack && pageStack.length > 0) {let currentPage = pageStack[pageStack.length - 1];// showLoginPanel:这个变量所有的页面都统一一下currentPage.setData({showLoginPanel: true})// 2.面板滑出以后，我们需要监听它成功的事件getApp().globalEvent.once("loginSuccess", () => {// 成功之后的回调函数wxp.request2(args).then(res => {resolve(res)}, err => {console.log("err", err)reject(err)})})} else {reject("page valid err")}})}// 如果有token的话，走request2return wxp.request2(args)
}export default wxp;

pages/api/index.wxml


<view class="page-section"><text class="page-section__title">3.9 request3</text><view class="btn-area"><button bindtap="testRequest3" type="primary">request3</button></view>
</view>

pages/api/index.js


Page({/*** 页面的初始数据*/data: {showLoginPanel:false},// 3.9 request3async testRequest3(e){const app = getApp();// 一个需要鉴权的接口let res3 = await app.wxp.request2({url:'http://localhost:3000/user/home'})if(res3) console.log("res3",res3);// 使用request3let res4 = await app.wxp.request3({url:'http://localhost:3000/user/home'})if(res4) console.log("res4",res4);},......
})

二、开发中遇到的问题

2.1 wx.request 经 Promise 封装后，如何拿到 RequestTask 实例

实现一：

创建新的类，Request这个类，封装了wx.request接口。
但是这种方法要改变旧的开发模式，会带来新的开发负担。

class Request {constructor(parms) {...this.requestTask = null;}request(method, url, data) {const vm = this;return new Promise((resolve, reject) => {this.requestTask = wx.request({...success(res) {resolve(res);},fail() {reject({...});}});});}abort() {if (this.requestTask) {this.requestTask.abort();}}
}
module.exports = Request;

实现二：

是把原生接口返回的RequestTask的实例，
挂载到我们返回的Promise实例上面，
但是这种方式，它会对原生的代码有侵入，
并且在我们代码里面，Promise实例并不是保持不变的，
在wxp.request3中，Promise实例就有所改变。

实现三：

这两种方式虽然可以达到同样的目的，
但却不是我们要采用的最终的一个方法，
那么更好的方式是利用javascript对象被引用传递的这样一个特点，
在这个参数上做手脚。

miniprogram/node_modules/miniprogram-api-promise/src/promise.js：
function _promisify(func) {if (typeof func !== 'function') return fnreturn (args = {}) =>{return new Promise((resolve, reject)=> {let rtnObj = func(Object.assign(args, {success: resolve,fail: reject}))if (args.onReturnObject) args.onReturnObject(rtnObj)})}
}我们看一下这个代码，
我们只需要在这个模块当中加一个固定的一个回调属性，
就可以解决这个问题了
if (args.onReturnObject) args.onReturnObject(rtnObj)

function _promisify(func) {if (typeof func !== 'function') return fnreturn (args = {}) =>new Promise((resolve, reject) => {// func(//   Object.assign(args, {//     success: resolve,//     fail: reject//   })// )let rtnObj = func(Object.assign(args, {success: resolve,fail: reject}))if (args.onReturnObject) args.onReturnObject(rtnObj)})
}

工具–npm构建

  <button bindtap="requestHomeApiByReq4" type="primary">test abort</button>

 // 3.9 测试 requestTaskrequestHomeApiByReq4(e){getApp().wxp.request4({url:'http://localhost:3000/user/home',onReturnObject(rtn){rtn.abort();}}).catch(err=>{console.log(err)})},

重点：

三、总结

这节课我们主要扩展了wxp模块的request3这个方法，
下节课开始学习tabbar组件。

微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.9 网络接口简介（九）扩展wxp模块的request3方法，实现用户登录的自动融合相关推荐

微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.5 网络接口简介（五）基于Promise+await、async关键字改写登录模块
零.回顾在上节课我们主要实践练习了Promise的三个方法,包括any.all.race. 现在我们对Promise变成已经有了一个大致的了解. 这节课我们尝试将登录模块使用Promise编程方式进 ...
微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.6 网络接口简介（六）关于Page页面隐藏代码执行及Promise对象catch处理的补充
零.回顾在上节课我们主要是基于 Promise 加 await.async关键字改写了登录模块代码, 但是我们在自动登录这一块的代码仍然有问题,这节课我们看一下, 如何在接口调用中实现微信用户的自动 ...
微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.7 网络接口简介（七）学习EventChannel对象
零.回顾在之前我们自定义实现picker-view组件的时候, 曾经使用过一个pop-up的自定义组件, 这个组件可以在底部滑入一个面板, 现在我们把登录按钮放在底部滑入的面板之上, 然后在完成登录 ...
活久见！月薪30k的小程序全栈开发到底有多难？
10年前,公司的标配是门户网站,造就了一批网站工作室.随着移动互联网大潮兴起,App又成了企业标配,IOS和Android开发赚的盆满钵满.然而App导致的手机内存告急,无止尽的信息推送,让微信小程序 ...
angularjs全栈开发知乎_1-4【微信小程序全栈开发课程】原生小程序框架介绍
1.打开小程序目录打开微信开发者工具,我们上一节新建的项目,我圈出来的这个地方就是小程序的目录结构(如果你那里没有显示,可以点击左上方的编辑器来显示) 2.原生小程序框架介绍给大家画了一张图,重要 ...
为啥我的页面模板的from提交不了数据_4-9【微信小程序全栈开发课程】意见反馈（四）--提交反馈信息
1.创建后端操作文件先在后端server/controllers文件夹中创建操作文件createopinion.js,用来将从前端页面提交的数据,插入到opinions表中,创建完之后,页面目录如下 ...
上拉加载更多后台数据_6-7【微信小程序全栈开发课程】记录页面（七）--分页加载记录数据...
现在是一次性加载所有的记录数据,数据多的时候,会加载比较慢,所以我们改成分页加载,一次最多加载15条数据每次拉倒底部都会自动加载下一页的数据,知道所有的数据加载完成 1.添加data变量编辑rec ...
eslint不报错 vue_2-2【微信小程序全栈开发课程】index页面搭建--ESlint格式错误
1.修改入口文件也就是src/pages/index/main.js文件 main.js是入口文件,通过main.js来加载index.vue文件.每个页面文件夹中都要有main.js文件 //加载 ...
3.2【微信小程序全栈开发课程】登录功能（一）--实现登录功能
在本地搭建好后端环境之后,我们来实现登录功能 1.安装SDK插件 SDK插件用来获取用户的openId SDK是server端(也就是后端)的插件,帮助我们很容易的获取openId.openId是微信 ...

微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.9 网络接口简介（九）扩展wxp模块的request3方法，实现用户登录的自动融合

零、回顾

一、在wxp组件中扩展实现request3接口

二、开发中遇到的问题

实现一：

实现二：

实现三：

三、总结

微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.9 网络接口简介（九）扩展wxp模块的request3方法，实现用户登录的自动融合相关推荐

最新文章

热门文章

微信小程序全栈开发实践 第三章 微信小程序开发常用的API介绍及使用 -- 3.9 网络接口简介（九）扩展wxp模块的request3方法，实现用户登录的自动融合

零、回顾

一、在wxp组件中扩展实现request3接口

二、开发中遇到的问题

实现一：

实现二：

实现三：

三、总结

微信小程序全栈开发实践 第三章 微信小程序开发常用的API介绍及使用 -- 3.9 网络接口简介（九）扩展wxp模块的request3方法，实现用户登录的自动融合相关推荐

最新文章

热门文章

微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.9 网络接口简介（九）扩展wxp模块的request3方法，实现用户登录的自动融合

微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.9 网络接口简介（九）扩展wxp模块的request3方法，实现用户登录的自动融合相关推荐