基于TypeScript从零重构axios

  [复制链接]
查看2336 | 回复12 | 2019-8-14 22:25:04 | 显示全部楼层 |阅读模式
! c' s0 q# e2 d6 r# b! c; P
360截图167708098610583.png
$ z& _7 {3 C5 w' O+ G8 p2 @& Z〖课程介绍〗
; z$ y1 }, Z# X: G- Z        TypeScript是前端的发展趋势,但是很多同学却缺少实战经验,而且市面上缺少TypeScript 的实战课程。本课程首先讲解TypeScript的一些基础语法和常见用法,接着带同学们使用TypeScript一步步去实现一个完整的axios JS库,然后进行完整的单元测试,最后把开发的JS 库打包并发布到npm上。通过课程学习完全掌握axios的实现原理,修炼原生JavaScript内功,提升个人职场竞争力。9 C; A; B9 |' b6 Q* ^, I% @
( ?$ i, W" g+ p0 u9 {% Z, y4 x" E' \$ r8 I1 k3 o' C1 y- H8 j% ]/ Z" Y  ~7 H
〖课程目录〗9 ^% f+ f0 R, L9 L- Y1 R$ d. {
第1章 课程介绍【悄悄告诉你,一定要看,有福利】2 s; K  S# Q2 U: \. q- h- L1 \
介绍本课程的主要内容,通过本次课程可以学到的知识点,学习方法介绍。
6 x: H. j8 R! Z) v1-1 课程介绍 试看( U; y) ~% [1 p' G% Y' x/ Q" ?

2 V9 U: R# v( p9 t: T% ]第2章 初识 Typescript【初次体验】
, \3 O! z- l2 W" A# A6 A' D教会同学们安装 Typescript 编译器,以及通过编写第一个 TypeScript 程序认识 TypeScript。/ k- f8 i+ v0 R
2-1 安装 TypeScript) o' R& y+ C: ^9 H, `0 C
2-2 编写第一个 TypeScript 程序 试看! M4 G2 W1 G8 N2 U! E
0 Y' b2 M; {$ {1 t
第3章 Typescript 类型系统【必备基础,牢固掌握】* R( m" Q+ P# H2 P7 k6 ]4 W; a4 H
参考官方文档,主讲 TypeScript 的一些重要的语法和概念,并配合一些具体的代码示例辅助说明,帮助同学们了解 TypeScript 的常见用法,为之后的实战打下基础。6 {& e" o0 _5 X
3-1 基础类型(上)
+ p( J( s2 n0 j5 t5 q& Q* M3-2 基础类型(下)
/ d8 S9 F$ s& B, r3-3 基础类型(注意版本报错问题)& y; f" ^& ~: W1 W
3-4 变量声明 - var 声明
" J. z% U; v5 Z# H' L3-5 变量声明 - let 声明
: v8 v& l. Z5 D( I  d, v3-6 变量声明 - const 声明, r% A5 o) E( w# }
3-7 变量声明 - 解构/ P) U" A! j, {9 d& g
3-8 变量声明 - 展开% I+ ^6 S, P' @+ _( U
3-9 接口 - 接口初探" A5 M6 U  }5 m9 \
3-10 接口 - 可选属性+只读属性+ w- D( V# ^) d1 J; B. ~! s: E
3-11 接口 - 额外属性检查+函数类型+可索引的类型4 B! \$ q: r7 Y" Y8 L- Q
3-12 接口 -类类型+继承接口+混合类型+接口继承类
, U* d: q3 f# s0 j5 a6 v3 b3-13 类 - 基本示例+继承4 {# C1 s4 g. _9 q9 Y
3-14 类 - 公共,私有与受保护修饰符+ readonly 修饰符
6 I1 V) u0 Y$ g- }& h6 N! ^% y3-15 类 - 存取器+ 静态属性8 \! `! O. Y, G# b1 U" l
3-16 类 - 抽象类+ 高级技巧
( i9 e+ F" h) s3-17 函数 - 基本示例+ 函数类型) F! \% K( @8 n" k
3-18 函数 - 可选参数和默认参数( {( ]2 P- m) @5 [6 h
3-19 函数 - this+ 重载2 P9 Y4 [) l% M  O2 n! M
3-20 泛型 - 基本示例+ 使用泛型变量+泛型类型
8 q* }- y- g) o. l3-21 泛型 - 泛型类+泛型约束
, L- v/ B/ c# z2 X' h7 J3-22 类型推断 - 基础+ 最佳通用类型+ 上下文类型8 E! m( e7 Z( p9 M- o
3-23 高级类型 - 交叉类型, u7 L3 {# e" e+ Q% W3 I2 F& o
3-24 高级类型 - 联合类型
  ]6 D4 e& ^* Z$ ?3 k  O2 V3-25 高级类型 - 类型保护+ N: x) ]9 ^) P5 U- ^2 f+ S& W, T
3-26 高级类型 - 可以为 null 的类型+ 字符串字面量类型# ^- B/ Q9 W. Z  _) Y

/ Q: X/ \) a  A; i第4章 ts-axios 项目构建【工欲善其事必先利其器】8 c  A8 }9 {! R# x1 Y1 k# Q1 K% b
分析 axios 项目的重构需求,使用 typescrpit-library-starter 脚手架初始化项目,并编写基础请求的代码,搭建整个 demo 的架构方案。
0 `# F$ p2 g4 C& B4-1 需求分析: ?2 u8 `5 Q6 G8 G( J
4-2 初始化项目 - 创建代码仓库/ v( o4 J8 ^# H$ G& m; T: t
4-3 初始化项目 - TypeScript library starter
' C0 W7 c9 K* k6 C$ d4-4 初始化项目 - 关联远程分支
  I3 X! ?8 b' n  v& z, ~9 S4-5 编写基础请求代码 - 创建入口文件0 i8 f" S1 E. F' C4 c6 h3 q
4-6 编写基础请求代码 - 利用 XMLHttpRequest 发送请求
4 T( L" {3 v! ?" @' @4-7 编写基础请求代码 - demo 编写
% c* l7 t% m9 }& b5 z# W0 d6 g
第5章 ts-axios 基础功能实现【核心流程】5 e3 o* m: K. Y4 ?+ X6 k2 G
实现 axios 的基础功能,包括对请求 url、data、header 以及响应 data、header 的处理。" F- N3 ?: j2 `: x' ~/ S
5-1 处理请求 url 参数 - 需求分析5 i8 o; ^0 m1 h, U& Q
5-2 处理请求 url 参数 - buildURL 函数实现
. m$ K, s0 u7 C. \* `3 y# \" d5 l; F5-3 处理请求 url 参数 - 实现 url 参数处理逻辑
8 p1 ?# D6 H! ~/ x+ |0 [. `1 H5-4 处理请求 url 参数 - demo 编写# W5 i2 t, l  B, p' A& w
5-5 处理请求 body 数据 - 需求分析+ 实现 试看
/ _$ A" Z5 a( k* S" H1 O5-6 处理请求 header - 需求分析
4 H$ {7 m- B* M+ [+ A5-7 处理请求 header - processHeaders 函数实现
/ l- i' Z( L* h/ o- W6 z6 g/ U5-8 处理请求 header - 实现请求 header 处理逻辑, |& |4 w3 r4 E, ?6 L  V/ I
5-9 处理请求 header - demo 编写! `. F1 s! Q3 b/ n6 Z
5-10 获取响应数据 - 需求分析+实现; z/ d6 q6 {# Q1 k( g4 s
5-11 处理响应 header - 需求分析+ parseHeaders 函数实现及应用
. |/ r, @" {& G' {4 p- g7 u5-12 处理响应 data - 需求分析+ transformResponse 函数实现及应用
4 I/ n& }/ ?, C# H8 q5 o% [; p
. M7 L8 x( D5 K: X+ r. a  v第6章 ts-axios 异常情况处理【不可忽视的边界条件】
+ ]* M" l4 A% O+ _. q5 S  c处理 axios 请求的一些异常情况,包括网络错误、请求超时,构造一个信息增强错误处理类。. p) b$ R$ c! ]( L3 X# I6 k
6-1 错误处理 - 需求分析: Y$ v" R0 ^* r" @$ l' ?: D$ ?
6-2 错误处理- 网络错误+超时错误+非200状态码+demo
; M9 z2 N# J% T4 i6-3 错误信息增强 - 需求分析
7 [4 V+ b: N! R! `5 f. R& e8 L6-4 错误信息增强 - 创建 AxiosError 类
8 H" t% n& {7 W7 {' {) v6-5 错误信息增强 - createError 方法应用+ 导出类型定义. w2 K: i+ K" p
  k9 ~- J% V' c0 Z" ^2 w; H
第7章 ts-axios 接口扩展【工厂模式的合理运用,设计思想的转变】
7 {' z; K) @9 i把 axios 从普通函数实现到通过工厂模式类的设计转变,并扩展更多调用接口,把 axios 变成了一个 混合对象,以及让响应数据支持泛型。
8 n0 \$ E* J) ~+ f7-1 -1 扩展接口 - 需求分析
; t; z) s1 ^  @' ]7-2 -2 扩展接口 -接口类型定义+ 创建 Axios 类" ^3 t& ]/ s+ @; @+ y
7-3 -3 扩展接口 - 混合对象实现+ demo 编写
8 Z7 Q+ P, K5 D5 t! w7-4 -1 axios 函数重载 - 需求分析+ 重载实现+ demo 编写
8 y& Y0 H) s8 n- o! Y* b& N2 R  R+ s7-5 -1 响应数据支持泛型- 需求分析+ 接口添加泛型参数+ demo 编写7 [' b' _) i& h2 e

$ @, R0 f' s( ^- O第8章 ts-axios 拦截器实现【巧妙运用 Promise 链式调用】' ], o6 h9 u, y/ b; c
实现 axios 的拦截器功能,对整个实现做了详细的设计,最后实现拦截器管理类以及链式调用逻辑。0 ?) Q4 @$ U# O+ H6 U. m
8-1 -1 拦截器的设计与实现 - 需求分析+ 整体设计8 A2 {" g$ `5 c5 P' C
8-2 -2 拦截器的设计与实现 - 拦截器管理类实现
4 |5 P) c( P: K  B8-3 -3 拦截器的设计与实现 - 链式调用实现
. i( y. w8 ^7 Q9 z6 J( F8-4 -4 拦截器的设计与实现 - demo 编写
4 v1 q5 r" X: k2 x% |
$ N7 {, Q& Z* q+ w) J第9章 ts-axios 配置化实现【巧妙运用策略模式实现配置合并】# Q% Z6 n/ @: z" j
让 axios 支持一些默认配置,实现了配置的合并,根据不同的属性采用不同的合并策略,并且扩展了 axios.create 方法扩展默认配置,生成新的实例。! P: c/ h: r: ?1 l" E# I: w
9-1 合并配置的设计与实现 - 需求分析 + 默认配置
7 ^% [# z0 l+ q+ @6 E. Y9 y9-2 合并配置的设计与实现 - 配置合并策略(上)
& E- S, o0 j6 ?2 g2 S! K% z9-3 合并配置的设计与实现 - 配置合并策略(下)* u, M$ V8 o3 Z; r
9-4 合并配置的设计与实现 - flatten headers + demo 编写
, o( g# ?. ]9 P  E7 b' v0 i, {9-5 请求和响应配置化- 需求分析+ 修改默认配置3 K8 P+ w) U, C6 q. v8 d, J
9-6 请求和响应配置化- transform 逻辑重构 + demo 编写$ Y( A4 Q0 G4 Z
9-7 扩展 axios.create 静态接口 - 需求分析+ 静态方法扩展+ demo 实现
- {6 v. v8 o7 r5 g( V' Z+ T3 Z
* w% C+ Q/ K! h第10章 ts-axios 取消功能实现【巧妙运用 Promise 实现异步分离】
9 }: i6 }" D0 M( k% P* D实现 axios 的取消功能,包括对取消接口的设计,CancelToken 类的设计与实现。
! G/ w9 `1 y# [; o6 f8 l8 _10-1 -1 取消功能的设计和实现 - 需求分析+ 异步分离的设计方案
2 t  |8 i. ?' X4 a6 P% D4 d* @5 w  E10-2 -2 取消功能的设计和实现 - CancelToken 类实现+ 扩展静态接口: V7 G) c# C8 U9 O3 u; ~, k* J
10-3 -3 取消功能的设计和实现 - Cancel 类的实现及 axios 的扩展+ 额外逻辑实现
: z3 V% G5 f; ^/ |8 @( Y2 y10-4 -4 取消功能的设计和实现 - demo 编写
  ^' o3 [3 r7 G: x
3 Q0 Z9 R7 ?* i  j! u2 H第11章 ts-axios 更多功能实现【锦上添花】
6 R, u6 R! T& z2 _, x, Y实现 axios 更多的功能,包括 XSRF 防御、上传、http 认证授权、withCredentials、自定义参数序列化、自定义合法状态码、自定义合法状态码等,百分百实现官方 axio 在浏览器端的功能。
1 A  F* W9 s! l: x/ i6 n11-1 withCredentials 需求分析&代码实现& demo 编写
$ @; @3 U+ v+ L3 D: l4 E3 }11-2 xsrf 防御 - 需求分析$ _' w$ d$ x8 G- B* {7 }1 Z9 k
11-3 xsrf 防御 - 代码编写! M8 `  l- w, m2 B( ^+ t' F2 P
11-4 xsrf 防御 - demo 编写; S: r! C2 N& ~% o7 R2 f4 y
11-5 上传和下载的进度监控 需求分析+ 代码实现8 N* q# B* `% S
11-6 上传和下载的进度监控 demo 编写5 s1 Y. e" f. L
11-7 HTTP 授权 需求分析+ 代码实现 + demo 编写! T/ y$ }' a. m  t  ^, t6 t, q  L, f
11-8 自定义合法状态码 需求分析+ 代码编写 + demo编写' l9 n5 r9 |( L2 e/ A" d
11-9 自定义参数序列化 需求分析+ 代码编写 + demo编写
- ~4 c8 [# f4 c6 h11-10 baseURL 需求分析+ 代码编写 + demo编写
( h8 |1 v2 x0 o) G2 W11-11 静态方法扩展 需求分析+ 代码编写 + demo编写9 z" [) }6 f' I$ w
: S7 Z; I8 `1 F: ]0 d
第12章 ts-axios 单元测试【保障代码高质量】* ~6 j3 h0 t5 p5 C
先介绍单元测试,再讲解测试环境搭建,最后完整的实现整个 axios 库的单元测试,保证测试覆盖率达到 99%
1 _9 k' q7 t- q% F* U' L12-1 前言; W/ I* o2 \! d+ f/ F" ?9 F+ }& J
12-2 Jest 的安装和配置 Jest 安装& ~( b! ^1 _* _! h4 e9 n
12-3 辅助模块单元测试 准备工作& B/ A% E4 e; N; }# C2 M% V" i, I# g
12-4 辅助模块单元测试 util 模块测试-
: _* i+ j. T6 `* h& E) L12-5 辅助模块单元测试 cookie 模块测试 + data 模块测试 + error 模块测试
4 V& r: x4 a" W; M1 a: ]6 l2 s12-6 辅助模块单元测试 headers 模块测试6 u5 U& \- G9 y; G: i
12-7 辅助模块单元测试 url 模块测试4 X& ]7 u4 m; I* g  r
12-8 请求模块单元测试 jasmine-ajax + 测试代码编写
( R" E' l' O7 H1 ?+ N12-9 header 模块单元测试 测试代码编写
9 d% V+ v, C5 a7 }7 m2 e12-10 Axios 实例模块单元测试 测试代码编写2 \0 y  x: o2 E5 P
12-11 拦截器模块单元测试 测试代码编写
% m2 k* v6 o7 V% M12-12 mergeConfig 模块单元测试 测试代码编写1 [6 h7 U1 W. {+ O3 h
12-13 请求取消模块单元测试 Cancel 类单元测试 + CancelToken 类单元测试 + Cancel 业务逻辑单元测试
3 Z9 I8 s) }7 n( e12-14 剩余模块单元测试 defaults 模块单元测试
& ~0 \# d5 W) P  F0 m12-15 剩余模块单元测试 transform 模块单元测试 + xsrf 模块单元测试2 V! Q- J$ V/ @. v# T
12-16 剩余模块单元测试 上传下载+HTTP 授权+ 静态方法模块单元测试% q3 E* s# r4 L* _8 N, c3 T3 ~& |% r3 V
12-17 剩余模块单元测试 补充未覆盖的代码测试
/ c' R# @; M, f+ A! F  ^2 `6 ]6 B" u% ?1 ?& ~5 K" ?8 @& S+ h5 k; Z; e6 d
第13章 ts-axios 部署发布【向社区分享你的项目】: I$ E+ v3 A6 l
讲解 ts-axios 库的部署和发布,使用 Rollup 编写部署构建脚本,使用 semantic-release 管理版本和发布。
. u0 ^6 e* Z+ A( x5 Q) h3 T13-1 ts-axios 编译与发布 需求分析 + 编译和打包7 i6 m% l7 H9 b4 J; s5 e. P: ^. |; \: r
13-2 ts-axios 编译与发布 自动化部署
' R- r  a+ l1 D# G; V4 |13-3 ts-axios 编译与发布 运行部署脚本
9 n  E  M; G+ |: U, F13-4 ts-axios 库 在 TS 和 JS 项目中引用
9 K8 v9 b% G  D% p7 {3 U' O$ f& U. S4 [& m  ~5 H
第14章 课程总结【知识梳理,巩固加深】8 ]- E! m  d3 F$ q* K/ r/ z
本次课程的整体回顾,总结学习的内容。) l1 i( f! t: x1 c! I0 @7 I0 l
14-1 课程总结 与回顾
" j9 i) b4 y& U; s; s
; a7 Y3 b7 g$ R+ y
$ u0 U5 R' _0 Z8 z: K〖下载地址〗
5 F, y: B$ `- v: d( F7 a8 E
游客,如果您要查看本帖隐藏内容请回复

0 K$ c) R; v7 g& s. d4 X/ m: y5 q2 j$ O8 M. |  Q. ]
6 x' }* W! V0 w1 G* c0 E# @
回复

使用道具 举报

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 | 显示全部楼层
5 Y& u( y: O1 ]# U4 V9 p
正想axios ts顺便也可以学学真棒
回复

使用道具 举报

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

使用道具 举报

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

本版积分规则