玄子Share-Axios 零基础到手撕源码

玄子Share-Axios 零基础到手撕源码

Axios 简介

Axios 是一个基于promise网络请求库,作用于node.js和浏览器中。 它是isomorphic的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.jshttp模块, 而在客户端 (浏览端) 则使用XMLHttpRequests

Axios 入门

使用方式

使用npm

$ npm install axios

1

使用CDN

1

模拟数据

官网:typicode https://github.com/typicode/json-server

安装 JSON 服务

npm install -g json-server

1

创建包含数据的db.json文件

{

"posts": [

{ "id": 1, "title": "json-server", "author": "typicode" }

],

"comments": [

{ "id": 1, "body": "some comment", "postId": 1 }

],

"profile": { "name": "typicode" }

}

1

2

3

4

5

6

7

8

9

启动 JSON 服务

json-server --watch db.json

1

请求http://localhost:3000/posts/1

{ "id": 1, "title": "json-server", "author": "typicode" }

1

关于更多描述以及路由请求见官网

Axios API

axios.request(config)

axios.get(url, config)

axios.delete(url, config)

axios.head(url, config)

axios.options(url, config)

axios.post(url, data\[, config])

axios.put(url, data\[, config])

axios.patch(url, data\[, config])

axios.postForm(url, data\[, config])

axios.putForm(url, data\[, config])

axios.patchForm(url, data\[, config])
Title

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

Axios 实战

发送请求
Title

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

响应结构

一个请求的响应包含以下信息

{

// data 由服务器提供的响应

data: {},

// status 来自服务器响应的 HTTP 状态码

status: 200,

// statusText 来自服务器响应的 HTTP 状态信息

statusText: 'OK',

// headers 是服务器响应头

// 所有的 header 名称都是小写,而且可以使用方括号语法访问

// 例如: response.headers['content-type']

headers: {},

// configaxios 请求的配置信息

config: {},

// request 是生成此响应的请求

// 在node.js中它是最后一个ClientRequest实例 (in redirects),

// 在浏览器中则是 XMLHttpRequest 实例

request: {}

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

并发请求
Title

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

相关推荐
大模型码小白16 小时前
数据可视化:AI 生成 HTML5 动态交互式数据图表
前端·数据库·人工智能·深度学习·机器学习·信息可视化·html5
平头哥技术团队2 天前
Day 21 _ 页内锚点_给每段起个 id,目录写 href=_#id_,点一下页面就滚到那一段
前端·html·html5
CoderYanger4 天前
前端基础——JavaScript(WebAPI)代码案例
java·开发语言·前端·javascript·css·前端框架·html5
平头哥技术团队6 天前
Day 16 | 用 ul、ol、li 一个标签,把散资料收成有序的技能清单页
开发语言·前端·html·html5
平头哥技术团队7 天前
Day 13 | 调 line-height 和 margin:三处间距让名片页脱离模板感
开发语言·前端·javascript·学习·html5
大模型码小白11 天前
数据可视化:AI处理多维数据的HTML5可视化方案
大数据·前端·javascript·人工智能·机器学习·信息可视化·html5
小江的记录本12 天前
【CSS】CSS 核心:盒模型、BFC/IFC、Flex/Grid 布局、响应式布局、移动端适配(附《思维导图》)
前端·css·面试·前端框架·tensorflow·html5·xss
我命由我1234512 天前
JS Mock(Mock 拦截请求的前提、Mock 使用、关闭 Mock)
开发语言·前端·javascript·前端框架·html·html5·js
小江的记录本12 天前
【HTML】HTML5 新特性、语义化标签、浏览器渲染流程(附《思维导图》)
前端·css·面试·前端框架·html·css3·html5
ly768920 天前
HTML5 从入门到工程实践:语义化、表单、多媒体、性能与项目规范详解
前端·html·html5