6.axios、json-server基本使用

一、json-serer

json-server 是一款小巧的接口模拟工具，一分钟内就能搭建一套 Restful 风格的 api，尤其适合前端接口测试使用。
只需指定一个 json 文件作为 api 的数据源即可

安装

[root@node-2 ~]# mkdir  json-server
[root@node-2 json-server]# npm install json-server
[root@node-2 json-server]# npm ls
json-server@ /root/json-server
└── json-server@0.17.0

#执行已经命令会自动生成一个文件，名字为db.json.文件中有几个样例的json数据
[root@node-2 json-server]# ./node_modules/.bin/json-server --watch db.json

#删除db.json中自带的数据，手动输入以下内容
[root@node-2 json-server]# cat db.json 
{
	"students": [ 
	    {
		"id": 1,
		"name": "zhangsan",
		"age": 20
	    },
	    {
		"id": 2,
		"name": "lisi",
		"age": 21
	    }
	],
	"teacher": [
	    {
	    	"name": "wang.Mr",
	    	"age": 43
	    },
	    {
			"name": "li.Mr",
			"age": 40
	    }
	]
}

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

访问方法如下：

[root@node-2 json-server]# curl http://127.0.0.1:3000/students/1
{
  "id": 1,
  "name": "zhangsan",
  "age": 20
}
[root@node-2 json-server]# curl http://127.0.0.1:3000/students/2
{
  "id": 2,
  "name": "lisi",
  "age": 21
}
1
2
3
4
5
6
7
8
9
10
11
12

查询教师

root@node-2 json-server]# curl http://127.0.0.1:3000/teacher?name=li.Mr
[
  {
    "name": "li.Mr",
    "age": 40
  }
]
1
2
3
4
5
6
7

二、axios简介

Axios是一个基于promise 的异步 ajax 请求库,前端最流行的 ajax 请求库。简单的讲就是可以发送get、post请求，负责与后端交互
Vue、React等框架的出现**，**促使了Axios轻量级库的出现， react/vue 官方都推荐使用 axios 发 ajax 请求

1.安装

[root@node-2 front]# npm install axios
[root@node-2 front]# npm ls |grep axios
└── axios@1.1.3

1
2
3
4

2.语法格式

axios(对象)
1

axios函数返回的是一个promise对象

三、axios用法

1.GET实例

[root@node-2 front]# cat index.js 
import axios from 'axios'


axios(
	{
		method: 'GET',
		url: 'http://localhost:3000/students/1'
	}
).then(
	 response => {  //成功的回调函数
                console.log(response.data)
        },
     faild => { //失败的回调函数
                console.log("请求失败了")
     }
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

执行结果：

[root@node-2 front]# npx babel-node index.js 
{ id: 1, name: 'zhangsan', age: 20 }

1
2
3

2.POST实例

也就是新增数据

[root@node-2 front]# cat index.js 
import axios from 'axios'


axios(
	{
		method: 'POST',
		url: 'http://localhost:3000/students/', 
		data: {
			"id": 3,
			"name": "wangwu"
		}
	}
).then(
	response => { 
		console.log(response.data)
	}
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

执行结果

[root@node-2 front]# cat /root/json-server/db.json 
{
  "students": [
    {
      "id": 1,
      "name": "zhangsan",
      "age": 20
    },
    {
      "id": 2,
      "name": "lisi",
      "age": 21
    },
    { //这里已经新增数据成功了
      "id": 3,
      "name": "wangwu"
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.PUT方法

[root@node-2 front]# cat index.js 
import axios from 'axios'


axios(
	{
		method: 'PUT',
		url: 'http://localhost:3000/students/1',
		data: {
			"name": "张无忌"
		}
	}
).then(
	response => { 
		console.log(response.data)
	}
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

执行结果

[root@node-2 front]# npx babel-node index.js 
{ name: '张无忌', id: 1 }

1
2
3

四、axios的其它使用方法

1.axios.get

[root@node-2 front]# cat index.js 
import axios from 'axios'

axios.get(
	'http://127.0.0.1:3000/students/1'
).then(
	response=>{
		console.log(response.data)
	}
)
1
2
3
4
5
6
7
8
9
10

import axios from 'axios'

axios.get(
	'http://127.0.0.1:3000/teacher?name=li.Mr'
).then(
	response => {
		console.log(response.data)
	}
)

1
2
3
4
5
6
7
8
9
10

2.axios.post

import axios from 'axios'

axios.post(
	'http://127.0.0.1:3000/students',
	{
		id: 4,
		name: "xiaohong"
	}
)

1
2
3
4
5
6
7
8
9
10

3.axios.put

import axios from 'axios'

axios.put(
        'http://127.0.0.1:3000/students/3',
        {
                "name": "xiaowang"
        }
)
1
2
3
4
5
6
7
8

4.axios.delete

import axios from 'axios'

axios.delete(
	'http://127.0.0.1:3000/students/4'
)
1
2
3
4
5

4.axios.defaults.baseRUL

每一个请求按钮都会写一个axios请求，对于url参数来说,如果参数很长，并且每个请求的域名都一样的，这样在每一个axios中重复性就太高了。所以有了baseURL参数

[root@node-2 front]# cat index.js 
import axios from 'axios'

axios.defaults.baseURL = 'http://127.0.0.1:3000'

axios.get(
	'/students/3',
).then(
	response=> {
		console.log(response.data)
	}
)

axios.get(
	'/students/1'
).then(
	response=>{
		console.log(response.data)
	}
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21