[小程序] 复用下拉刷新、上拉加载页面配置

Posted on 2018-09-08

¶前言

之前使用 Ionic 开发公司的 app 的时候，写过通过 TS 的 class 的 extends 来达到复用目的的代码，减少了很多工作量，维护起来也更省心。

这两周开始开发小程序，出于几个原因我只使用了小程序的原生开发能力：

因为是第一个小程序项目，想 体验一下小程序的原生开发 过程
有两个很优秀的第三方框架——wepy 和 mpvue 但我对这两个 框架选择困难。也只有开发过原生、了解原生开发的痛点所在之后，才能有理有据、有针对性地选择某一个框架。
而且引入第三方框架存在风险，也许屏蔽了一些原生开发的坑，但是 框架也可能引入新的坑……
这个小程序 需求比较简单，原生小程序开发理应 hold 住

然后我又碰到了两个大部分逻辑（下拉刷新、上拉加载）相似的列表页。还是出于“懒惰“，我想尽可能复用代码。

凭着刷过一遍文档的模糊印象，我本来以为小程序提供的 Behaviors 是为这个场景量身定制的，然后重看文档才发现 Behaviors 仅支持 Component 的复用……

所以要怎么复用 Page 的相关代码呢？因为小程序原生支持绝大多数 ES6 的 api，我自然而然就想到了用 ES6 的 class 和 extends 的一套来实现！于是我掉进了坑里……

[NG] 考古 - HttpInterceptor 循环引用错误

Posted on 2018-08-25 | Edited on 2018-08-29

¶前言

恍然间发现这个错误已经不复存在了，于是稍微看了下相关 issue、commit、PR。写篇笔记祭奠下～

¶需求描述

一个使用 HttpInterceptor 的常见场景是实现基于 token 的验证机制。

为什么要使用拦截（intercepting）呢？

因为，在基于 token 的验证机制中，证明用户身份的 token 需要被附带在每一个（需要验证的请求的）请求头。如果不使用拦截手段，那么（由 HttpClient 实例触发的）每一个请求都需要手动修改请求头（header）。显然手动修改是繁琐和难以维护的。所以，我们选择做拦截。

Angular 官网也给出了范例，以下代码可以实现一个 AuthInterceptor 拦截器：

import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { AuthService } from '../auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private auth: AuthService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authToken = this.auth.getAuthorizationToken();

    const authReq = req.clone({
      headers: req.headers.set('Authorization', authToken)
    });

    return next.handle(authReq);
  }
}