基于TypeScript从零重构axios

  [复制链接]
查看2997 | 回复12 | 2019-8-14 22:25:04 | 显示全部楼层 |阅读模式

5 q" Y: d& |) i" r0 k 360截图167708098610583.png , f' G+ ~: F0 [) ~7 Z& D
〖课程介绍〗8 _! L7 @. k& G# [) g
        TypeScript是前端的发展趋势,但是很多同学却缺少实战经验,而且市面上缺少TypeScript 的实战课程。本课程首先讲解TypeScript的一些基础语法和常见用法,接着带同学们使用TypeScript一步步去实现一个完整的axios JS库,然后进行完整的单元测试,最后把开发的JS 库打包并发布到npm上。通过课程学习完全掌握axios的实现原理,修炼原生JavaScript内功,提升个人职场竞争力。9 C; A; B9 |' b6 Q* ^, I% @# ]/ k5 ]4 N( L8 N
, y4 x" E' \$ r8 I1 k3 o5 W( O  y" w. p
〖课程目录〗
% B$ g9 n7 f( ~! F1 d第1章 课程介绍【悄悄告诉你,一定要看,有福利】; s0 u* x9 u& a+ H2 w
介绍本课程的主要内容,通过本次课程可以学到的知识点,学习方法介绍。
" v, r" L) ]- z1-1 课程介绍 试看
) c9 v+ g( c# d' p  N4 H8 y
$ [; N# S; j2 `$ ~) V' U. l第2章 初识 Typescript【初次体验】
' C5 u% Q1 U* s3 `0 w; p/ u教会同学们安装 Typescript 编译器,以及通过编写第一个 TypeScript 程序认识 TypeScript。
& r  [/ H1 J  N4 a( N$ \5 N/ b2-1 安装 TypeScript
9 ]2 L$ F" D4 j& a& s5 T2-2 编写第一个 TypeScript 程序 试看. `% C: L  p+ \6 r# F
$ ~& }5 M, {( B# s" |# n1 k
第3章 Typescript 类型系统【必备基础,牢固掌握】
/ b# Y- r. s, Y+ x, Z. j* [: F参考官方文档,主讲 TypeScript 的一些重要的语法和概念,并配合一些具体的代码示例辅助说明,帮助同学们了解 TypeScript 的常见用法,为之后的实战打下基础。
- f1 R) h& u  x0 `2 P* x7 z" C3-1 基础类型(上)
0 p) r8 d, n" C6 d1 o3-2 基础类型(下)$ A' P5 V8 z7 g& u9 `
3-3 基础类型(注意版本报错问题): f& O& H1 P( w
3-4 变量声明 - var 声明
6 S' _. D8 {, H& |: U" A3-5 变量声明 - let 声明) T6 g+ P! W5 h$ Z1 G, M' Q& i
3-6 变量声明 - const 声明: }7 s' R+ z! o% r# Z9 Z# j
3-7 变量声明 - 解构
& `3 T- K/ h* J6 U9 G3-8 变量声明 - 展开
# K; J( Y8 I2 D0 G* V$ H6 x( ~3-9 接口 - 接口初探! N# b2 L& G+ s  l8 V, i- g
3-10 接口 - 可选属性+只读属性
! O: D" {; y' ]! L* h6 Y3-11 接口 - 额外属性检查+函数类型+可索引的类型
4 o& W. x, \( k5 `! @9 A3-12 接口 -类类型+继承接口+混合类型+接口继承类
# H( F% f! k: R& A3-13 类 - 基本示例+继承
- k% R5 O5 e% `+ x4 ~% b2 U3-14 类 - 公共,私有与受保护修饰符+ readonly 修饰符; o0 \8 a! a0 c0 W/ a  k; |+ M
3-15 类 - 存取器+ 静态属性
* D; D+ w& o% t, G0 D5 O* C7 M9 `3-16 类 - 抽象类+ 高级技巧8 t  G6 Y( L5 X3 `6 P) I
3-17 函数 - 基本示例+ 函数类型
! s: n+ e$ Q$ z4 r3-18 函数 - 可选参数和默认参数8 [8 R/ X9 \2 I7 d# z
3-19 函数 - this+ 重载
0 H! ~8 V( E" D, ^3-20 泛型 - 基本示例+ 使用泛型变量+泛型类型. k% i4 g9 b! P+ H' \' {/ b
3-21 泛型 - 泛型类+泛型约束
: m" K, d1 `$ b* |& @+ G* K& q% \3-22 类型推断 - 基础+ 最佳通用类型+ 上下文类型
3 ?0 E" p- n! w" N# u( V* p. }3-23 高级类型 - 交叉类型* u0 |" y2 G2 S0 G3 c4 W& B6 H* ]" z) V
3-24 高级类型 - 联合类型
7 m6 o: |4 t% b7 a$ ?7 d7 K3-25 高级类型 - 类型保护
; m7 {2 a- F% f5 W/ j! q3-26 高级类型 - 可以为 null 的类型+ 字符串字面量类型
$ M' B' c/ q% B' e
% y! p4 E5 O; h( s( W  N第4章 ts-axios 项目构建【工欲善其事必先利其器】
* |4 @6 i7 ~/ l3 {: I$ \分析 axios 项目的重构需求,使用 typescrpit-library-starter 脚手架初始化项目,并编写基础请求的代码,搭建整个 demo 的架构方案。
7 l) r- u6 i8 J; s: b3 l$ W- V" t/ u4-1 需求分析3 e* E/ X0 V" \
4-2 初始化项目 - 创建代码仓库' R, f- {- V) d1 O0 K: }
4-3 初始化项目 - TypeScript library starter% V% q6 e0 v# g6 g% [2 a; G
4-4 初始化项目 - 关联远程分支
- q% }: [" k, \8 u, s& Q4-5 编写基础请求代码 - 创建入口文件( s, n6 K2 `. h
4-6 编写基础请求代码 - 利用 XMLHttpRequest 发送请求
0 L4 T; L4 C: ^7 D6 Z4-7 编写基础请求代码 - demo 编写6 P( W$ ~7 l; {! D  m8 r6 [) v

8 J8 x* }) ?9 I. n; h第5章 ts-axios 基础功能实现【核心流程】0 v+ G4 l: Z! w& C
实现 axios 的基础功能,包括对请求 url、data、header 以及响应 data、header 的处理。
  f' c# W3 f. z- |% A2 |" Y2 u# ^5-1 处理请求 url 参数 - 需求分析" {7 }3 B* I, H( J& |: C
5-2 处理请求 url 参数 - buildURL 函数实现. k0 E" @" D: N. k1 F% ~
5-3 处理请求 url 参数 - 实现 url 参数处理逻辑
+ k& z9 ?6 S- y( f; z! l5 N5-4 处理请求 url 参数 - demo 编写$ Q& C6 c, g. c5 g
5-5 处理请求 body 数据 - 需求分析+ 实现 试看# \6 N/ c/ N- w6 `
5-6 处理请求 header - 需求分析
1 \+ b5 v- L3 Z; x/ s0 b# @5-7 处理请求 header - processHeaders 函数实现
' S( R) C& |. t8 l5-8 处理请求 header - 实现请求 header 处理逻辑* U3 w; X! G0 M# j, u% }
5-9 处理请求 header - demo 编写
. [2 e, i/ b0 F; W5-10 获取响应数据 - 需求分析+实现  O: m# z3 n: N" D
5-11 处理响应 header - 需求分析+ parseHeaders 函数实现及应用
7 O2 ]8 g9 b  n8 ?6 c5-12 处理响应 data - 需求分析+ transformResponse 函数实现及应用
* ]+ `/ Z5 a( t& k9 j' U; e0 Y5 k: \9 A# i9 @+ W
第6章 ts-axios 异常情况处理【不可忽视的边界条件】, j" {, n; w' f: Q) o
处理 axios 请求的一些异常情况,包括网络错误、请求超时,构造一个信息增强错误处理类。
) O1 T! U% k- H6-1 错误处理 - 需求分析
6 \2 r3 `$ R, I/ ~! `8 k! f* w! [6-2 错误处理- 网络错误+超时错误+非200状态码+demo
0 e6 C2 r% Q* ]/ w) ?9 B# n2 I6-3 错误信息增强 - 需求分析# w3 C2 R7 q7 u+ Y' K
6-4 错误信息增强 - 创建 AxiosError 类1 O+ @) ?8 A- A( U
6-5 错误信息增强 - createError 方法应用+ 导出类型定义
; h  ?: m/ }0 A. z
. T- N: s2 P" C) s" J% [. u% I第7章 ts-axios 接口扩展【工厂模式的合理运用,设计思想的转变】
! X' h3 D; D' V把 axios 从普通函数实现到通过工厂模式类的设计转变,并扩展更多调用接口,把 axios 变成了一个 混合对象,以及让响应数据支持泛型。
/ y; {0 @4 z: L* `  X% r* D7-1 -1 扩展接口 - 需求分析: _+ {2 X; v1 y4 H3 A
7-2 -2 扩展接口 -接口类型定义+ 创建 Axios 类0 h1 V3 p' M. g" w
7-3 -3 扩展接口 - 混合对象实现+ demo 编写% m, M6 k" t& M/ _- K! o
7-4 -1 axios 函数重载 - 需求分析+ 重载实现+ demo 编写
: ~3 k' Q8 b7 o+ h( C7-5 -1 响应数据支持泛型- 需求分析+ 接口添加泛型参数+ demo 编写; x1 \! G  a  l7 Z  P, c$ x4 C' f
- V7 s# ], b$ N! f
第8章 ts-axios 拦截器实现【巧妙运用 Promise 链式调用】' }3 m1 _$ x0 N
实现 axios 的拦截器功能,对整个实现做了详细的设计,最后实现拦截器管理类以及链式调用逻辑。
: t% t$ Q0 k" i8-1 -1 拦截器的设计与实现 - 需求分析+ 整体设计0 K  N, z5 ]3 j! W1 P8 Q( V( R1 _: S6 z
8-2 -2 拦截器的设计与实现 - 拦截器管理类实现
+ m- n( Y; F: N8-3 -3 拦截器的设计与实现 - 链式调用实现
. y4 ?" e2 R" S& e8-4 -4 拦截器的设计与实现 - demo 编写
7 c; R6 b6 t, I& ~* ~5 a
& q; v; w3 L" S! P/ _第9章 ts-axios 配置化实现【巧妙运用策略模式实现配置合并】
& C+ {" _+ G3 F* X2 J- p$ k3 ^( Q让 axios 支持一些默认配置,实现了配置的合并,根据不同的属性采用不同的合并策略,并且扩展了 axios.create 方法扩展默认配置,生成新的实例。
7 r% x( r- i9 \/ k( E5 ]9-1 合并配置的设计与实现 - 需求分析 + 默认配置
& A0 q% `; v( a/ n4 d9-2 合并配置的设计与实现 - 配置合并策略(上)4 ^; S1 T' ], G# L6 T, t
9-3 合并配置的设计与实现 - 配置合并策略(下)/ h9 l9 T# D0 A
9-4 合并配置的设计与实现 - flatten headers + demo 编写
2 Y: U! r6 x3 d: {8 N' O4 y0 b9-5 请求和响应配置化- 需求分析+ 修改默认配置
( P* x" U+ u% ^0 i/ u9-6 请求和响应配置化- transform 逻辑重构 + demo 编写: V3 X- G2 ]2 m' `# M
9-7 扩展 axios.create 静态接口 - 需求分析+ 静态方法扩展+ demo 实现: b+ M6 q$ a+ B4 P/ v2 q/ W
; P# A* ]8 x. h- F7 E
第10章 ts-axios 取消功能实现【巧妙运用 Promise 实现异步分离】* d0 @8 u, {7 O5 K
实现 axios 的取消功能,包括对取消接口的设计,CancelToken 类的设计与实现。- g$ x; i7 x+ k# s
10-1 -1 取消功能的设计和实现 - 需求分析+ 异步分离的设计方案. @1 K& B- L( Z0 j, [+ p
10-2 -2 取消功能的设计和实现 - CancelToken 类实现+ 扩展静态接口/ }' ~6 ]1 S$ K# N" S. d0 @/ ~" T
10-3 -3 取消功能的设计和实现 - Cancel 类的实现及 axios 的扩展+ 额外逻辑实现
0 G% C; |; g# i3 @10-4 -4 取消功能的设计和实现 - demo 编写  `2 M) X$ _- U8 e
8 T$ _( l' l# s( L
第11章 ts-axios 更多功能实现【锦上添花】
6 J4 f) O' Q0 |5 g实现 axios 更多的功能,包括 XSRF 防御、上传、http 认证授权、withCredentials、自定义参数序列化、自定义合法状态码、自定义合法状态码等,百分百实现官方 axio 在浏览器端的功能。
: E8 y7 ], I& J" u- q( h' F7 f( l11-1 withCredentials 需求分析&代码实现& demo 编写& _4 D/ u" _1 M, j+ y  x
11-2 xsrf 防御 - 需求分析
6 A* o3 w6 o7 H9 @5 M; E11-3 xsrf 防御 - 代码编写0 h- D) x2 Z& n' b% I6 K4 K$ o  p
11-4 xsrf 防御 - demo 编写! J; d. M, ?' k
11-5 上传和下载的进度监控 需求分析+ 代码实现( g5 R# w4 ^8 B% U5 X0 [5 [
11-6 上传和下载的进度监控 demo 编写
; W4 ?7 d- w$ o8 u9 T/ {11-7 HTTP 授权 需求分析+ 代码实现 + demo 编写
7 f, D" w! u6 P/ ^, z11-8 自定义合法状态码 需求分析+ 代码编写 + demo编写) e, F; v& ~4 J" n5 j8 R
11-9 自定义参数序列化 需求分析+ 代码编写 + demo编写, L1 t: Y5 o" p
11-10 baseURL 需求分析+ 代码编写 + demo编写
, @- `5 A' L+ e3 n9 |! ?8 a11-11 静态方法扩展 需求分析+ 代码编写 + demo编写
/ ~5 G% H" S- w0 b& n# x( N
( k* L6 }  y% l1 n0 r/ D! e/ G! H3 D1 Q第12章 ts-axios 单元测试【保障代码高质量】8 ^( J8 Q/ f) n- `8 M
先介绍单元测试,再讲解测试环境搭建,最后完整的实现整个 axios 库的单元测试,保证测试覆盖率达到 99%
* D, ~+ K$ a( k12-1 前言# F0 z& o+ V4 s% ~# a7 `' h
12-2 Jest 的安装和配置 Jest 安装3 T1 U! z8 p, D1 Z
12-3 辅助模块单元测试 准备工作, n: A7 }: `; v' T& W
12-4 辅助模块单元测试 util 模块测试-
0 A  ~! U' c6 Z12-5 辅助模块单元测试 cookie 模块测试 + data 模块测试 + error 模块测试& v: m3 r* R1 E" l9 \$ j
12-6 辅助模块单元测试 headers 模块测试* g8 g  a$ k' O; U- J* a9 L( {" O
12-7 辅助模块单元测试 url 模块测试* T6 o) s3 E$ }. u* S: h  K7 d/ j
12-8 请求模块单元测试 jasmine-ajax + 测试代码编写
4 F( E& i8 M4 J! I8 @12-9 header 模块单元测试 测试代码编写. A6 S& l# u" c' b# L
12-10 Axios 实例模块单元测试 测试代码编写
$ K3 k! ]# J( `, ^12-11 拦截器模块单元测试 测试代码编写
  ]% x) u4 d7 ]; o12-12 mergeConfig 模块单元测试 测试代码编写# l6 P  J3 s3 D+ f( y4 E
12-13 请求取消模块单元测试 Cancel 类单元测试 + CancelToken 类单元测试 + Cancel 业务逻辑单元测试
" a1 B7 n- ^- b& I12-14 剩余模块单元测试 defaults 模块单元测试
0 A  A- {& i( P& [) h' }: c12-15 剩余模块单元测试 transform 模块单元测试 + xsrf 模块单元测试
. x' K, R5 _2 T; _1 H" g* a9 X12-16 剩余模块单元测试 上传下载+HTTP 授权+ 静态方法模块单元测试
" M. g$ V, N8 p" ^12-17 剩余模块单元测试 补充未覆盖的代码测试! u* G6 b4 Y4 E% @) J" v

" D/ `4 c8 Q5 T1 f0 m4 c$ S第13章 ts-axios 部署发布【向社区分享你的项目】9 v6 m8 G& t/ C# h$ X4 F0 T
讲解 ts-axios 库的部署和发布,使用 Rollup 编写部署构建脚本,使用 semantic-release 管理版本和发布。# m9 T4 c0 X- Z0 e) F1 t' }0 i3 x$ o
13-1 ts-axios 编译与发布 需求分析 + 编译和打包
  h3 Q, _" [, K6 M' B: c, W" z13-2 ts-axios 编译与发布 自动化部署7 B( D; i  a3 J( |, D' N& y
13-3 ts-axios 编译与发布 运行部署脚本
- s% I" N7 z! c( ?0 H13-4 ts-axios 库 在 TS 和 JS 项目中引用) B1 a! G5 {3 s' K; R$ @" Q+ N+ m0 m
* Y9 v5 N; n0 D
第14章 课程总结【知识梳理,巩固加深】
, J" J( b8 q$ r) K# E本次课程的整体回顾,总结学习的内容。
" z; l4 g) V1 A6 g. m) ]14-1 课程总结 与回顾  t/ ^" f$ V1 ]  m
9 i! P& p5 |! a! Y
& o% b# s" U! \
〖下载地址〗
" ^5 }/ V! \: I9 _4 \/ E$ P
游客,如果您要查看本帖隐藏内容请回复

1 ]( u' i. d+ y9 y  B5 x( x0 z, D" x/ Y. X

6 q$ t! F, G0 k! X" X2 |
回复

使用道具 举报

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 | 显示全部楼层
9 a% u& ]( R, G4 b$ d
正想axios ts顺便也可以学学真棒
回复

使用道具 举报

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

使用道具 举报

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

本版积分规则