零、回顾

在上节课我们主要是基于 Promise 加 await、async关键字改写了登录模块代码，
但是我们在自动登录这一块的代码仍然有问题，这节课我们看一下，
如何在接口调用中实现微信用户的自动登录。

一、上节课的代码遇到的两个问题

1.代码只要在页面中定义，就会被隐含执行。
2.关于 Promise 的catch

1.1 代码只要在页面中定义，就会被隐含执行。

我们在一个page界面中，给Promise类对象扩展了一个any方法。

这个any方法用于实现js中尚处于草案阶段一个Promise.any的设计，
但是这个方法只要被放在任何一个page页面的顶部，即使这个page没有在app.json里面的
pages字段里面声明，这段代码也会被默默的去执行掉，
这一点在上节课的代码演示中已经验证过了。但是如果我们把Promise.any的扩展代码，放在一个非page文件中，例如lib目录下的any.js这个文件里面，
只要这个文件不被显式地引用，这个代码它就不会被初始化。为什么为这样呢？可能小程序在启动的时候，预先扫描了所有的page页面，
即使这个页面它没有被显式引用，也会被扫描，
它扫描的时候，所有这个文件作用于下面的代码，都会被隐默执行。为了避免这种在犄角旮旯里有悄悄执行的代码，
我们最好将这段Promise.any这样的代码，放在一个独立的文件里面，然后显式地在app.json中去显式的引用。

我们看一下上面的代码，我们在独立的文件里面去定义这个方法的一个代码，
下面的代码我们在app.js中，通过import引入上面独立的代码模块。这样可以使我们代码更加的清晰，也便于我们理解和维护。

1.2 关于 Promise 的catch

我们先看一下关于Promise的catch的机制是怎样的？

我们在定义它的子实例的时候，每一个都添加了一个catch，
也就是prommise1、promise2、promise3，它们后面每一个都有一个catch。
在Promise.any中，针对每一个Promise的子实例，还添加了一个reject回调函数。这个时候我们执行代码，它输出是这样的。

这个它代表Promise它是成功输出了，这个输出结果，与我们预期是不符合的。
正常情况下一个子实例发生错误，不应该走到总实例接受状态的分支。
那么这是为什么呢？原因在于Promise它不是一个观察者对象。
它并不像这个事件一样，它可以冒泡派发事件。
对于Promise的每一个拒绝状态或者接受状态的环节，如果不向下传递，
那在下一个环节里面是获知不到它的一个状态的。在上面的代码中，我们直接在promise1上面添加了一个状态，它进行了一个简单的打印操作，
但是并没有进一步把这个错误抛出来，并没有向下去传递，这个就相当于把这个状态处理完了，
然后告诉外层这个promise它已经有一个处理结果了，所以呢我们在总实例上，才捕获到一个空的结果对象。
就是我们看到的这样一个 res undefined，这样一个打印结果。要想改写这个实例，我们只需要在处理错误的地方，将错误向下传递就可以了。例如改造之后的代码我们看一下。

在最外层的子实例promise1上面，我们将错误打印，再讲=将错误使用throw关键字给抛出来，
这样在Promise.any内部仍然可以出发reject回调的执行。
如果没有throw err的话，走不到reject(err)里面。
在上面的代码中，我们先执行的是上面的catch，然后才会走到下面的reject分支里面去。

我们可以将Promise这个处理错误的机制与Koa框架里面的洋葱式中间件的设计做对比。
在上面的代码中，无论是使用throw抛出错误，还是基于reject传递错误，都相当于Koa框架里面的next。

这就是上节课我们在代码演示的时候，遇到的两个问题，这两个问题都值得我们注意一下。

二、如何在接口请求中，整合用户的自动登录

2.1 wxp 模块化

app.js

import wxp from "./lib/wxp.js"App({wxp: wxp,

lib/wxp.js

import { promisifyAll } from 'miniprogram-api-promise';
const wxp = {}
promisifyAll(wx, wxp)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))
}export default wxp;

index.wxml

<view class="page-section"><text class="page-section__title">3.6 模块化</text><view class="btn-area"><button bindtap="requestOneHomeApi"  type="primary">请求user/home接口</button></view>
</view>

index.js

  // 3.6 模块化async requestOneHomeApi(e) {let res3 = await getApp().wxp.request2({url: "http://localhost:3000/user/home",});if (res3) console.log("res3", res3);},

token信息

清除本地token

请求里面没有带token信息

三、总结

这节课主要梳理了两个问题，一个是代码在page页面中，可能会被隐藏执行，虽然这个页面没有被用到。
另外一个问题是关于Promise对象的catch处理，它像Koa框架里面的洋葱中间件机制一样，
在使用时需要我们注意一下向下传递。下节课我们在request2方法的基础之上，实现一个request3这样一个方法，
这个方法将用于实现用户自动登录的整合。

微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.6 网络接口简介（六）关于Page页面隐藏代码执行及Promise对象catch处理的补充相关推荐

微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.5 网络接口简介（五）基于Promise+await、async关键字改写登录模块
零.回顾在上节课我们主要实践练习了Promise的三个方法,包括any.all.race. 现在我们对Promise变成已经有了一个大致的了解. 这节课我们尝试将登录模块使用Promise编程方式进 ...
微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.9 网络接口简介（九）扩展wxp模块的request3方法，实现用户登录的自动融合
零.回顾在上节课我们主要介绍了观察者模式, 并据此模式实现了一个event模块, 这节课我们基础用户登录的自动整合, 尝试在wxp模块当中扩展出一个request3这样的一个接口. 一.在wxp组件 ...
微信小程序全栈开发实践第三章微信小程序开发常用的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.6 网络接口简介（六）关于Page页面隐藏代码执行及Promise对象catch处理的补充

零、回顾

一、上节课的代码遇到的两个问题

1.1 代码只要在页面中定义，就会被隐含执行。

1.2 关于 Promise 的catch

二、如何在接口请求中，整合用户的自动登录

2.1 wxp 模块化

三、总结

微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.6 网络接口简介（六）关于Page页面隐藏代码执行及Promise对象catch处理的补充相关推荐

最新文章

热门文章

微信小程序全栈开发实践 第三章 微信小程序开发常用的API介绍及使用 -- 3.6 网络接口简介（六）关于Page页面隐藏代码执行及Promise对象catch处理的补充

零、回顾

一、上节课的代码遇到的两个问题

1.1 代码只要在页面中定义，就会被隐含执行。

1.2 关于 Promise 的catch

二、如何在接口请求中，整合用户的自动登录

2.1 wxp 模块化

三、总结

微信小程序全栈开发实践 第三章 微信小程序开发常用的API介绍及使用 -- 3.6 网络接口简介（六）关于Page页面隐藏代码执行及Promise对象catch处理的补充相关推荐

最新文章

热门文章

微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.6 网络接口简介（六）关于Page页面隐藏代码执行及Promise对象catch处理的补充

微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.6 网络接口简介（六）关于Page页面隐藏代码执行及Promise对象catch处理的补充相关推荐