玄子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

相关推荐
千鼎数字孪生-可视化4 小时前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
iphone1082 天前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
一只小风华~3 天前
Web前端开发: :has功能性伪类选择器
前端·html·html5·web
长路 ㅤ   3 天前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术
张晓~183399481214 天前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
xhload3d4 天前
智慧航天运载体系全生命周期监测 | 图扑数字孪生
物联网·3d·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·三维建模·工控·航空航天·火箭升空·智慧航空·智慧航天·火箭发射·火箭回收
涔溪6 天前
HTML5 实现的圣诞主题网站源码,使用了 HTML5 和 CSS3 技术,界面美观、节日氛围浓厚。
css3·html5·节日
Amy.Wang6 天前
前端如何实现电子签名
前端·javascript·html5
veminhe7 天前
html怎么设置html5
html·html5
失落的多巴胺7 天前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5