基于TypeScript从零重构axios

  [复制链接]
查看2408 | 回复12 | 2019-8-14 22:25:04 | 显示全部楼层 |阅读模式
7 H% x' j. j2 T9 m2 n' c+ O) S! S
360截图167708098610583.png
4 L: a& T' D7 f8 g" S〖课程介绍〗+ v- Z, q: V0 i: X8 N
        TypeScript是前端的发展趋势,但是很多同学却缺少实战经验,而且市面上缺少TypeScript 的实战课程。本课程首先讲解TypeScript的一些基础语法和常见用法,接着带同学们使用TypeScript一步步去实现一个完整的axios JS库,然后进行完整的单元测试,最后把开发的JS 库打包并发布到npm上。通过课程学习完全掌握axios的实现原理,修炼原生JavaScript内功,提升个人职场竞争力。9 C; A; B9 |' b6 Q* ^, I% @
  D+ Z& D. Q4 F; H/ e1 J, y4 x" E' \$ r8 I1 k3 o# c) P7 w" U6 `3 A3 I' v: c
〖课程目录〗/ p2 t0 z: _7 ?& z5 f4 A
第1章 课程介绍【悄悄告诉你,一定要看,有福利】
/ N; U- d  i2 Z( B! |( H8 z* b介绍本课程的主要内容,通过本次课程可以学到的知识点,学习方法介绍。
0 }7 e6 B  s$ l7 f# v* Q1-1 课程介绍 试看
8 R$ V2 u/ [- x& [$ j7 ]$ E9 s4 V+ F
2 r: ^2 g7 P: _& L2 J" l第2章 初识 Typescript【初次体验】$ e( O' u" H: i% r* W! }2 d+ J
教会同学们安装 Typescript 编译器,以及通过编写第一个 TypeScript 程序认识 TypeScript。
0 R* N7 J' o) f: G4 x& e3 n. _# X2-1 安装 TypeScript: N/ Q. q6 l5 \$ }; \1 y
2-2 编写第一个 TypeScript 程序 试看
: \4 U+ r3 i. B, ^; W' P8 }. u8 K* p+ p' ^1 [# X
第3章 Typescript 类型系统【必备基础,牢固掌握】# W- @( W! @7 d$ Y; u8 B
参考官方文档,主讲 TypeScript 的一些重要的语法和概念,并配合一些具体的代码示例辅助说明,帮助同学们了解 TypeScript 的常见用法,为之后的实战打下基础。6 D  W$ d5 K( O) o0 Y
3-1 基础类型(上)
( W5 d0 V. u$ \6 X, P% h$ ^; Q6 J3-2 基础类型(下)
6 F5 q) D% U/ H  u% l3-3 基础类型(注意版本报错问题)& i: u" |+ E8 m7 l" m+ d
3-4 变量声明 - var 声明; a) m: L/ R- ^+ i- Z2 O8 J
3-5 变量声明 - let 声明  o) z* g8 b0 ?
3-6 变量声明 - const 声明7 j. u6 ~) J; t! K+ g
3-7 变量声明 - 解构2 u+ Y( C$ E# u& j( |& Y
3-8 变量声明 - 展开3 U6 V. e* d& A7 s
3-9 接口 - 接口初探
4 B2 N8 M- K; y3 E3-10 接口 - 可选属性+只读属性% p4 C/ F9 L1 |, p3 Q; |7 s; T) J4 c
3-11 接口 - 额外属性检查+函数类型+可索引的类型6 y+ A& I/ @% \5 g3 G
3-12 接口 -类类型+继承接口+混合类型+接口继承类! J3 Y5 x) U0 F+ C' t$ G" Y* ~
3-13 类 - 基本示例+继承; t1 v: N1 H% g
3-14 类 - 公共,私有与受保护修饰符+ readonly 修饰符
7 J6 l( P. c9 a3-15 类 - 存取器+ 静态属性% E; i( e6 _" K+ j- v) g0 t0 Z
3-16 类 - 抽象类+ 高级技巧' O" o( l7 k% ~7 f$ O: |
3-17 函数 - 基本示例+ 函数类型
; t5 x- a& N9 H; k4 q3-18 函数 - 可选参数和默认参数
; ], B3 l# K# L8 @3-19 函数 - this+ 重载
9 C2 X+ N# Q& U" f9 C' \. T3-20 泛型 - 基本示例+ 使用泛型变量+泛型类型
* \/ Q' T; m& ^& P8 `! o0 Q/ Z9 c3-21 泛型 - 泛型类+泛型约束: c. H$ X& g: A+ D* ~/ }& n
3-22 类型推断 - 基础+ 最佳通用类型+ 上下文类型
+ f5 c8 Y' w* W( y# d3-23 高级类型 - 交叉类型  [! u' d: `. d, r# q1 R1 v
3-24 高级类型 - 联合类型
2 _6 n. D, j: S( b  \3-25 高级类型 - 类型保护
3 N) X( l( M3 j3-26 高级类型 - 可以为 null 的类型+ 字符串字面量类型% s, H3 \# |- K' l6 ~4 X
& i' @" b5 Z) X% j8 e8 j
第4章 ts-axios 项目构建【工欲善其事必先利其器】
" _4 E4 T- V. I+ Z4 G分析 axios 项目的重构需求,使用 typescrpit-library-starter 脚手架初始化项目,并编写基础请求的代码,搭建整个 demo 的架构方案。
. _* f) U9 a$ r/ p1 a* q4-1 需求分析( m$ n+ C  m* q" f
4-2 初始化项目 - 创建代码仓库
  C- A8 V9 f$ V+ g: f$ Z4-3 初始化项目 - TypeScript library starter# i# x/ t# Z6 a) `) @
4-4 初始化项目 - 关联远程分支
# W5 [$ O6 j7 r! o, X  r2 k4-5 编写基础请求代码 - 创建入口文件
0 Y9 S5 q% f% s: r4 k2 u: ~4-6 编写基础请求代码 - 利用 XMLHttpRequest 发送请求
! {( U& b0 A! ~+ p0 [4-7 编写基础请求代码 - demo 编写
$ X  ]- h: a7 P, t) L$ g: v7 w
0 y5 h. M1 l, ^第5章 ts-axios 基础功能实现【核心流程】1 s* Q* @6 H# d+ Y
实现 axios 的基础功能,包括对请求 url、data、header 以及响应 data、header 的处理。( d6 A( c& M3 ^$ ^, X
5-1 处理请求 url 参数 - 需求分析
, Y, p5 b+ K0 f, F5-2 处理请求 url 参数 - buildURL 函数实现
2 Y+ A& u4 ], W7 ?5-3 处理请求 url 参数 - 实现 url 参数处理逻辑1 C6 ^- V/ G' y  V* r6 w
5-4 处理请求 url 参数 - demo 编写6 [! ]. Q1 l6 s8 m; b/ ^
5-5 处理请求 body 数据 - 需求分析+ 实现 试看& c6 z6 d% ]1 B7 k+ J4 m$ Y6 v
5-6 处理请求 header - 需求分析2 q! G$ o5 e+ A
5-7 处理请求 header - processHeaders 函数实现$ P: Y6 t) k- L
5-8 处理请求 header - 实现请求 header 处理逻辑5 k- C; j( U8 z' I
5-9 处理请求 header - demo 编写( Y& I# \9 F( O5 N3 f2 U" f5 p
5-10 获取响应数据 - 需求分析+实现
, B: q4 Y8 k8 |# k# y5-11 处理响应 header - 需求分析+ parseHeaders 函数实现及应用+ @4 z; ?2 X- Y# g% Y. A
5-12 处理响应 data - 需求分析+ transformResponse 函数实现及应用: V6 e1 ]' Z! q9 o3 J" s7 g

# ^' Y4 @9 F3 z. c( V; Q第6章 ts-axios 异常情况处理【不可忽视的边界条件】
& F# P; T. }8 N# B9 _8 |" |处理 axios 请求的一些异常情况,包括网络错误、请求超时,构造一个信息增强错误处理类。
4 f% t6 e( |1 L# x' }9 T- p7 D6-1 错误处理 - 需求分析) N8 o/ w1 W- X1 A1 k
6-2 错误处理- 网络错误+超时错误+非200状态码+demo
7 G5 s, }& Y5 k7 e6-3 错误信息增强 - 需求分析! Y1 \/ H) K3 A8 u8 H
6-4 错误信息增强 - 创建 AxiosError 类
/ y$ [. q' U6 n/ V* Z/ G6-5 错误信息增强 - createError 方法应用+ 导出类型定义" j% C/ |- m/ g0 U

. m3 C5 {* n+ {: d第7章 ts-axios 接口扩展【工厂模式的合理运用,设计思想的转变】
; X+ ~* S7 T) l% ~$ v% `把 axios 从普通函数实现到通过工厂模式类的设计转变,并扩展更多调用接口,把 axios 变成了一个 混合对象,以及让响应数据支持泛型。
: |: Q9 W& B) q  x7-1 -1 扩展接口 - 需求分析
. j2 N# H+ v! Y7-2 -2 扩展接口 -接口类型定义+ 创建 Axios 类0 p1 `% ^6 N9 Y) }/ b5 {
7-3 -3 扩展接口 - 混合对象实现+ demo 编写
- P& ~2 L" r- Y9 E; B7-4 -1 axios 函数重载 - 需求分析+ 重载实现+ demo 编写
# q" Z3 K2 {6 c* J/ O# @1 }5 d7-5 -1 响应数据支持泛型- 需求分析+ 接口添加泛型参数+ demo 编写
: N: e" Y; Y( F6 I  t, F1 |  _# f  g% t
第8章 ts-axios 拦截器实现【巧妙运用 Promise 链式调用】
, F4 W/ r+ s( P2 r实现 axios 的拦截器功能,对整个实现做了详细的设计,最后实现拦截器管理类以及链式调用逻辑。
- z- e: [+ ?- C, v! y' i8-1 -1 拦截器的设计与实现 - 需求分析+ 整体设计
( [2 _/ A- g/ C% X/ |" I8-2 -2 拦截器的设计与实现 - 拦截器管理类实现- p+ ~  t# v' z2 T
8-3 -3 拦截器的设计与实现 - 链式调用实现
0 ?; o  M& v" U8-4 -4 拦截器的设计与实现 - demo 编写$ g: o( E3 ]% T
5 O% S$ m- x1 F4 X( Z: S. L) W) }% v
第9章 ts-axios 配置化实现【巧妙运用策略模式实现配置合并】
$ S8 I# u3 |0 x$ b# u2 j让 axios 支持一些默认配置,实现了配置的合并,根据不同的属性采用不同的合并策略,并且扩展了 axios.create 方法扩展默认配置,生成新的实例。& z: M3 M6 }  q/ B5 @
9-1 合并配置的设计与实现 - 需求分析 + 默认配置
+ j0 m/ u6 W) N0 v% l8 b3 b9-2 合并配置的设计与实现 - 配置合并策略(上)9 m5 b5 ^. F) n0 w" [
9-3 合并配置的设计与实现 - 配置合并策略(下)2 w1 R5 q+ e: _/ U# I3 \  u) u
9-4 合并配置的设计与实现 - flatten headers + demo 编写% Q& M$ r3 k. C( C+ Z
9-5 请求和响应配置化- 需求分析+ 修改默认配置
! }, ], a2 k1 C" I" ^3 H2 l) I9-6 请求和响应配置化- transform 逻辑重构 + demo 编写
* R  u' }2 G% f6 g: x6 C9-7 扩展 axios.create 静态接口 - 需求分析+ 静态方法扩展+ demo 实现
. C1 n( ~: S: D" V: {1 ~9 r
, u9 W/ r6 V; `. N* o0 }第10章 ts-axios 取消功能实现【巧妙运用 Promise 实现异步分离】
& C" B, l# \) W! L实现 axios 的取消功能,包括对取消接口的设计,CancelToken 类的设计与实现。
5 r- t* K" I6 G4 J. G1 D8 Y10-1 -1 取消功能的设计和实现 - 需求分析+ 异步分离的设计方案
. R& n" D8 `& g$ a5 f10-2 -2 取消功能的设计和实现 - CancelToken 类实现+ 扩展静态接口' ^8 N) C7 g6 l. h6 r" I3 o
10-3 -3 取消功能的设计和实现 - Cancel 类的实现及 axios 的扩展+ 额外逻辑实现4 c( L- y! _3 f  H4 q
10-4 -4 取消功能的设计和实现 - demo 编写3 D5 T9 [  v0 D  J2 I1 C6 E
" C' c* B  N. i9 Z
第11章 ts-axios 更多功能实现【锦上添花】
/ J! L" A& R5 F$ D2 u9 S- I实现 axios 更多的功能,包括 XSRF 防御、上传、http 认证授权、withCredentials、自定义参数序列化、自定义合法状态码、自定义合法状态码等,百分百实现官方 axio 在浏览器端的功能。
( U% h1 n8 ^- i! z' x1 G11-1 withCredentials 需求分析&代码实现& demo 编写
: ^$ r  Q" x7 G8 }- c( h8 s' V8 M* T11-2 xsrf 防御 - 需求分析
4 A1 R. K8 j6 z( D+ n& P9 h8 q11-3 xsrf 防御 - 代码编写8 Y' X; D3 ]. A/ a
11-4 xsrf 防御 - demo 编写; e, C  {; E6 C6 b# s" w, I
11-5 上传和下载的进度监控 需求分析+ 代码实现# r, {% i* M9 F, _& M. @) @% ~
11-6 上传和下载的进度监控 demo 编写) f1 k: Y) |2 q
11-7 HTTP 授权 需求分析+ 代码实现 + demo 编写$ i/ |" g/ Z1 H4 p1 g- `. R
11-8 自定义合法状态码 需求分析+ 代码编写 + demo编写* E! D- b0 F% J$ T
11-9 自定义参数序列化 需求分析+ 代码编写 + demo编写4 i( z9 b: `8 L% T6 V9 C
11-10 baseURL 需求分析+ 代码编写 + demo编写8 f0 l9 @8 H' V* i  q: t: B
11-11 静态方法扩展 需求分析+ 代码编写 + demo编写
2 d; @3 s1 V2 X1 w# Z
1 O/ x7 M# f. A0 r1 J4 a5 ~* L第12章 ts-axios 单元测试【保障代码高质量】  f4 a2 K; n2 I% `5 |% M) S
先介绍单元测试,再讲解测试环境搭建,最后完整的实现整个 axios 库的单元测试,保证测试覆盖率达到 99%- A1 W! E1 }  }
12-1 前言2 F3 z+ h4 ?: z- y1 f! N
12-2 Jest 的安装和配置 Jest 安装. S9 F1 x" b6 w
12-3 辅助模块单元测试 准备工作
3 G, v6 F  q  J7 Y9 T* S12-4 辅助模块单元测试 util 模块测试-
8 ~" Z# W- m- j. L- J' r, k12-5 辅助模块单元测试 cookie 模块测试 + data 模块测试 + error 模块测试
& H& V+ }$ W) F2 z& p4 w12-6 辅助模块单元测试 headers 模块测试
8 l9 F! J- F. E! B) k7 B12-7 辅助模块单元测试 url 模块测试
5 ]: H, |1 z" \2 e" H12-8 请求模块单元测试 jasmine-ajax + 测试代码编写
; I. S; e7 |* n! ?7 P3 T12-9 header 模块单元测试 测试代码编写
# N' r+ F* V1 f- p/ |5 {1 c12-10 Axios 实例模块单元测试 测试代码编写
9 K5 N5 f/ H, S; H! F& I12-11 拦截器模块单元测试 测试代码编写8 @) t8 ~5 Q2 e( R' l$ ]
12-12 mergeConfig 模块单元测试 测试代码编写
/ J8 z- u  z# b, X2 R% p4 r12-13 请求取消模块单元测试 Cancel 类单元测试 + CancelToken 类单元测试 + Cancel 业务逻辑单元测试8 \. W! n2 d, N, \
12-14 剩余模块单元测试 defaults 模块单元测试2 G1 k9 g/ Y; p3 S, D3 b; H- m
12-15 剩余模块单元测试 transform 模块单元测试 + xsrf 模块单元测试
. l7 {" r1 s/ i0 t9 u/ I9 P3 o12-16 剩余模块单元测试 上传下载+HTTP 授权+ 静态方法模块单元测试& ]  T2 D* N$ h# i+ j; N
12-17 剩余模块单元测试 补充未覆盖的代码测试& `7 `& Z3 z. V. I2 d7 q

1 ]! K" f6 K, x2 X6 e第13章 ts-axios 部署发布【向社区分享你的项目】
5 }- q& P+ e1 G1 S  g7 o' p6 G讲解 ts-axios 库的部署和发布,使用 Rollup 编写部署构建脚本,使用 semantic-release 管理版本和发布。8 l% z! |8 Z* g8 H+ R8 s
13-1 ts-axios 编译与发布 需求分析 + 编译和打包
* O4 `* R% f- {' H6 f13-2 ts-axios 编译与发布 自动化部署9 K( L4 A0 w6 i
13-3 ts-axios 编译与发布 运行部署脚本
8 F8 i' V0 L: w% ^, C13-4 ts-axios 库 在 TS 和 JS 项目中引用
" }1 x% e/ y% x( e* ^) i( C
2 R/ M7 n: R7 b: A; l" H第14章 课程总结【知识梳理,巩固加深】
) v3 |6 r7 s( E0 I! n" i& J! ~0 a本次课程的整体回顾,总结学习的内容。4 P7 V, I* T* p  p) }, \3 f- }. d* g
14-1 课程总结 与回顾/ {: O$ [' i2 w) @: ?! @- l# i
# L* {1 n. P/ d' `

. e/ s& @# I: s, J3 f- q〖下载地址〗
( r/ h& A$ p& i" U9 z
游客,如果您要查看本帖隐藏内容请回复
: ^! {5 M! @9 N0 e5 s/ m$ g8 Q; `; r

; d3 t8 G  ]9 ~$ Q
' R3 q2 \4 N9 T: Q4 u1 E7 ?# v
回复

使用道具 举报

sunjun1051 | 2019-9-9 14:29:28 | 显示全部楼层
强烈支持楼主ing……
回复

使用道具 举报

jaywin | 2019-9-11 21:52:12 | 显示全部楼层
看到这帖子真是高兴!
回复

使用道具 举报

都是你的错 | 2019-10-13 16:58:30 | 显示全部楼层
强烈支持楼主ing……
回复

使用道具 举报

Before80 | 2019-11-26 21:05:35 | 显示全部楼层
hello php , hello world !
回复

使用道具 举报

shifangming | 2020-6-28 16:37:30 | 显示全部楼层
基于TypeScript从零重构axios
回复

使用道具 举报

RayCssjmt | 2020-8-11 16:10:58 | 显示全部楼层
正想axios ts顺便也可以学学真棒
回复

使用道具 举报

wwj | 2021-6-1 19:50:57 | 显示全部楼层
学习学习
回复

使用道具 举报

qwety20185 | 2021-9-5 09:07:56 | 显示全部楼层
, ?; L& u- z2 R% ~/ P, ~3 q
正想axios ts顺便也可以学学真棒
回复

使用道具 举报

春游的夏天 | 2022-3-25 09:49:34 | 显示全部楼层
在 TS 和 JS 项目中引用
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则