一 、Http 请求报文
包括了三部分： 求情行、请求头，请求体。
1、请求行：
是HTTP请求的第一行，包含了请求方法、请求目标和HTTP协议版本。常用的请求方法有GET、POST、PUT、DELETE等，用于指定客户端希望服务器执行的操作。请求目标是指请求的资源路径，可以是一个具体的文件路径或者是一个URL。HTTP协议版本通常是HTTP/1.1。
请求类型：
2、请求头：
请求头包含了客户端向服务器传递的额外信息，以键值对的形式表示。常见的请求头有以下几种：请求头可以包含多个。
- Host：指定服务器的主机名和端口号。
- User-Agent：标识客户端的类型和版本信息，用于服务器识别客户端。
- Accept：指定客户端能够接受的响应内容类型。
- Content-Type：指定请求体的数据类型，常用的有application/json、application/x-www-form-urlencoded等。
- Authorization：用于身份验证，包含了客户端的身份凭证。
除了上述常见的请求头，还有很多其他的请求头可以用于传递不同的信息，具体使用取决于需求。 - Cookie: 携带cookie数据。
3、请求体：
请求体是可选的，用于传递客户端向服务器发送的数据。它通常用于POST、PUT等请求方法，用于传递表单数据、JSON数据等。请求体的格式取决于Content-Type请求头的值。
//请求体的格式有两种，需要告诉服务器，是通过求情头的Content-Type来告诉我的。
// 第一种格式：application/x-www-form-urlencoded
username=lvmanba&age=20
// 第二种格式：application/json
{
"username"：lvmanba, "age": 20}
// 第三种格式：multipart/form-data 文件上次
二、 Http 响应报文
响应状态行：
响应状态码（status），响应对应的文本描述（statusText)
多个响应头：
//响应回来内容的格式有text/html,text/json
//charset 是响应回来的内容的编码
Content-Type: text/html; charset=utf-8
//当浏览器接收到这个响应后，会按照 Set-Cookie 指令来存储 Cookie。这些 Cookie 之后会在同一域名下的请求中自动附加到请求头中，供服务器读取。
Set-Cookie: BD_CK_SAM=1; path=/
响应体：
html 文本 / json 文本 / js / css / 图片…
三、访问地址风格API分类
1、REST API: restful
(1)、发送请求进行CRUD 哪个操作由请求方式来决定
(2)、同一个请求路径可以进行多个操作
(3)、请求方式会用到GET/POST/PUT/DELETE
2、非REST API: restless
(1)、请求方式不决定请求的CRUD 操作
(2)、一个请求路径只对应一个操作
(3)、一般只有 GET/POST
四、使用json-server 搭建环境
json-server是一款 json 数据服务器，它运行在 Express 服务器，可以对json文件、js脚本生成的json数据、远程json数据进行restful风格的增删改查操作，通过指定一个json文件作为api数据源，可以进行分页、排序、关联查询、范围查询等各种查询操作，是一套完整的模拟 REST API 接口。
1、安装
npm install -g json-server
2、创建一个json文件
文件名为 data.json
{
"posts": [
{
"id": "1", "title": "a title", "views": 100 },
{
"id": "2", "title": "another title", "views": 200 }
],
"comments": [
{
"id": "1", "text": "a comment about post 1", "postId": "1" },
{
"id": "2", "text": "another comment about post 1", "postId": "1" }
],
"profile": {
"name": "typicode"
}
}
3、运行json-server
在data.json的目录(D:\demo)，运行cmd，然后键入： json-server --watch db.json
打开 index
提示：两种风格返回的结果一个是数组，另外一个是对象。如下图所示。
也可以改变端口和路由规则：
# 第一种：默认的运行方式
D:\demo> json-server --watch data.json // 更改默认端口(3000) 不加watch也可以。
D:\demo> json-server data.json
# 第二种：更改端口号
D:\demo> json-server -p 8888 data.json
# 第三种 配置主机地址
D:\demo> json-server -H 0.0.0.0 data.json
# 第四种 新增配置 添加自定义路由，根目录下新建routes.json文件，内容如下
{
"/api/*": "/$1",
"/:resource/:id/show": "/:resource/:id",
"/posts/:category": "/posts?category=:category",
"/articles?id=:id": "/posts/:id"
}
D:\demo> json-server data.json --routes routes.json
五、XHR封装自己的ajax
要求：我们根据axiso的功能，自己来模仿者构建一个类似的。
1、返回值类型为promise，成功的结果为response,异常的结果为err。
2、能处理多种求情 GET/POST/PUT/DELETE
3、函数的参数为一个一个配置对象
{
url:'', //请求地址
method: '', //请求方法GET/POST/PUT/DELETE
params:{
}, //GET/DELETE请求的query参数
data:{
}, //POST/DELETE 请求的请求体参数
}
4、响应json数据自动解析为js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<br>
<button class="btn btn-primary" type="button" id="testGet" >GET请求</button>
</div>
<script>
const testGet = document.querySelector("#testGet")
testGet.addEventListener("click",function(){
axios({
url: 'http://localhost:3000/posts2',
method: 'GET',
params: {
id: 1,
xxx: 'abc'
}
}).then(err=>{
response => {
console.log(response)
},
error => {
alert(error.message)
}
})
});
//对象解构语法,无论是对象使用还是函数使用返回来的都是promise结构。
function axios({
url,
method='GET',
params = {
}, //自动附加在地址栏上
data={
}
}){
//返回一个promise对象
return new Promise((resolve,reject)=>{
method = method.toUpperCase() //全部转为大写。
//处理query参数，拼接在url上， 如?id=1&name=''