axios入门(一)
1.Http请求交互的基本过程
- 前台应用从浏览器向服务器发送HTTP请求（请求报文）
- 后台服务器接收到请求后，调度服务器应用处理请求，向浏览器端返回HTTP响应（响应报文）
- 浏览器端接收到响应，解析显示响应体/调用监视回调
HTTP请求报文
- 请求行
method/url
GET/product_detail?id=2
POST/login - 多个请求头
Host:www.baidu.com
Cookie:BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706;
Content-Type: application/x-www-form-urlencoded 或者application/json - 请求体
username=tom&pwd=123
Http响应报文
- 响应行：响应状态码/对应的文本
- 多个响应头：
Content-Type: text/html;charset=utf-8
Set-Cookie: BD_CK_SAM=1;path=/ - 响应体：
html文本/json文本/js/css/图片...
post请求体参数格式
- Content-Type: application/x-www-form-urlencoded;charset=utf-8
用于键值对参数，参数的键值用=连接, 参数之间用&连接
例如: name=%E5%B0%8F%E6%98%8E&age=12 - Content-Type: application/json;charset=utf-8
用于json 字符串参数
例如: - Content-Type: multipart/form-data
用于文件上传请求
常见的响应状态码
| 200 | ok | 请求成功。一般用于GET 与POST 请求 |
| 201 | created | 已创建。成功请求并创建了新的资源 |
| 401 | Unauthorized | 未授权，请求要求用户的身份认证 |
| 404 | Not Found | 服务器无法根据客户端的请求找到资源 |
| 500 | Internal Server Error | 服务器内部错误，无法完成请求 |
不同类型的请求及其作用
- GET: 从服务器端读取数据
- POST: 向服务器端添加新数据
- PUT: 更新服务器端已经数据
- DELETE: 删除服务器端数据
API的分类
- REST API : restful
(1) 发送请求进行CRUD 哪个操作由请求方式来决定
(2) 同一个请求路径可以进行多个操作
(3) 请求方式会用到GET/POST/PUT/DELETE - 非REST API : restless
(1) 请求方式不决定请求的CRUD 操作
(2) 一个请求路径只对应一个操作
(3) 一般只有GET/POST
json-server是什么？
用来快速搭建REST API 的工具包
使用json-server
- 在线文档: https://github.com/typicode/json-server
- 下载: npm install -g json-server
- 目标根目录下创建数据库json 文件: db.json
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" },
{ "id": 2, "title": "json-server-2", "author": "typicode-2" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
posts:贴子
comments：评论
-
启动服务器执行命令：json-server --watch db.json
-
使用浏览器访问测试
-
http://localhost:3000/posts/1 直接定位到某一个元素
使用axios访问测试
- GET请求 从服务端获取数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rest api 测试</title>
</head>
<body>
<div>
<button onclick="testGet()">Get请求</button>
<button onclick="testPost()">POST请求</button>
<button onclick="testPut()">Put请求</button>
<button onclick="testDelete()">DELETE请求</button>
</div>
</body>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
<script>
// 1.GET请求：从服务器端获取数据
function testGet(){
// axios.get('http://localhost:3000/posts')
// axios.get('http://localhost:3000/posts/1')//获取id为1的对象
axios.get('http://localhost:3000/posts?id=1&id=2')//获取id为1或2的数组
.then(response=>{
console.log('/posts get',response.data)
})
}
</script>
</html>
- Post请求，向服务器端添加新数据
// 2.POST请求：从服务器端添加数据
function testPost(){
axios.post('http://localhost:3000/posts',{tiele:'xxx-3',author:'yyyy-3'})//保存数据
.then(response=>{
console.log('/posts post',response.data)
})
}
3.Put请求：从服务器端更新数据
// 3.Put请求：从服务器端更新数据
function testPut(){
axios.put('http://localhost:3000/posts/3',{tiele:'xxx-....',author:'yyyy-....'})//保存数据
.then(response=>{
console.log('/posts put',response.data)
})
}
- delete 请求:删除服务端数据
// 4.DELETE请求：从服务器端删除数据
function testDelete(){
axios.delete('http://localhost:3000/posts/3')
.then(response=>{
console.log('/posts delete',response.data)
})
}
