axios学习笔记（一）：学习HTTP相关的技术知识点

客官°小女子只卖身不卖艺 2023-07-13 03:16 11阅读 0赞

> \*\*HTTP是一种能够获取如 HTML 这样的网络资源的 \*\*protocol(通讯协议)。**它是在 Web 上进行数据交换的基础，是一种 client-server 协议，也就是说，请求通常是由像浏览器这样的接受方发起的。一个完整的Web文档通常是由不同的子文档拼接而成的，像是文本、布局描述、图片、视频、脚本等等。**

![image.png][]

### 1. HTTP请求交互的基本过程 ###

![image.png][image.png 1]

1.  前后应用从浏览器端向服务器发送HTTP请求（请求报文）
2.  后台服务器接收到请求后，调度服务器应用处理请求，向浏览器返回HTTP响应（响应报文）
3.  浏览器端接收到响应，解析显示响应体/调用监视回调

### 2. HTTP请求报文 ###

1.  请求行：method url: GET/url, POST/url
2.  多个请求头

Host: www.baidu.com  
Cookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706;  
Content-Type: application/x-www-form-urlencoded 或者 application/json

1.  请求体

username=tom&pwd=123  
\{“username”: “tom”, “pwd”: 123\}

### 3. HTTP响应报文 ###

1.  响应状态行: status statusText
2.  多个响应头  
      
    Content-Type: text/html;charset=utf-8  
      
    Set-Cookie: BD\_CK\_SAM=1;path=/
3.  响应体  
      
    html 文本/json 文本/js/css/图片…

### 4. post请求体参数格式 ###

1.  Content-Type:application/x-www.form-urlencoded;charset=utf-8

用于键值对参数，参数的键值用=连接，参数之间用&连接  
例如: name=%E5%B0%8F%E6%98%8E&age=12

1.  Content-Type:application/json;charset=utf-8

用于 json 字符串参数  
例如: \{“name”: “%E5%B0%8F%E6%98%8E”, “age”: 12\}

1.  Content-Type: multipart/form-data

用于文件上传请求

### 5. 常见的响应状态码 ###

200 OK 请求成功。一般用于GET与POST请求  
201 Created 已创建。成功请求并创建了新的资源  
401 Unauthhorized 未授权/请求要求用户的身份认证  
404 Not Found 服务器无法根据客户端的请求找到资源  
500 Internal Server Error 服务器内部错误，无法完成请求

### 6. 不同类型的请求及作用 ###

1.  GET： 从服务器端读取数据
2.  POST: 向服务器端添加新数据
3.  PUT: 更新服务器端已经数据
4.  DELETE: 删除服务器端数据

### 7. API的分类 ###

1.  REST API: restful  
      
    (1) 发送请求进行CRUD哪个操作由请求方式来决定
    
    (2) 同一个请求路径可以进行多个操作  
    (3) 请求方式会用到GET/POST/PUT/DELETE
2.  非 REST API: restless  
      
    (1) 请求方式不决定请求的CRUD操作
    
    (2) 一个请求路径只对应一个操作  
    (3) 一般只有GET/POST

### 9. 使用 \*\*json-server \*\*搭建 **REST API** ###

#### 9.1 **json-server**是什么\*\*?\*\* ####

用来快速搭建 REST API 的工具包

#### 9.2 如何使用json-server ####

1.  全局安装json-server

npm install -g json-server

1.  目标根目录下创建数据库json文件：db.json

{ 
    "posts": [
    {  "id": 1, "title": "json-server", "author": "typicode" }
    ], "comments": [
    {  "id": 1, "body": "some comment", "postId": 1 } ],
    "profile": {  "name": "typicode" } }

1.  启动服务器执行命令

json-server --watch db.json

![image.png][image.png 2]

### 总结： ###

本篇文章主要分享了有关http相关的技术知识点，为后期的学习axios打下基础。

[image.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAyMC9wbmcvMTQ4MTQ2LzE1ODM3MzYxMjIxMzQtMTBlOThiMGQtNTkyZS00NDRiLTk4NDQtYWYzNDExMWE0OGNlLnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=326&name=image.png&originHeight=652&originWidth=1168&size=155916&status=done&style=none&width=584
[image.png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAyMC9wbmcvMTQ4MTQ2LzE1ODM3MzYyMDQ5MTEtM2Y3MDg2OGYtODZjZS00MjJlLTlmNGMtOTNlNGE1MWQ0NzZlLnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=218&name=image.png&originHeight=436&originWidth=1326&size=203077&status=done&style=none&width=663
[image.png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAyMC9wbmcvMTQ4MTQ2LzE1ODM3NTQwMTgxMzMtZjU4MDE5ZmEtMGViZS00MjFkLWEyYzktYjk1Zjg4M2FjYjhhLnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=371&name=image.png&originHeight=742&originWidth=1324&size=97149&status=done&style=none&width=662