前后端数据交互(一)——网络请求详解
前后端分离之后，网络请求是前端的必备技能。网络请求中浏览器工作流程，你了解多少？
一、什么是HTTP协议？
HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写，是一种通信协议，主要用于从服务器传输超文本到客户端的传送协议。
我们在浏览器中输入网址（URL），然后浏览器给服务器发送一个请求，服务器收到我们的请求之后进行处理后，生成响应，携带浏览器需要的html、css、js等超文本信息，通过HTTP协议返回给浏览器，浏览器再通过解析返回的html、css、js等文件，这样我们就可以看的一个完美的网页了。请求过程如图所示：
二、URL介绍
URL是Uniform Resource Locator的缩写，URL地址是统一资源定位符，是互联网上用来标识某一处资源的地址。
基本格式如下：
schema://host[:port#]/path/.../[;url-params][?query-string][#anchor]一个完整的URL包括以下几部分：
- 协议部分(schema)：指定底层使用的协议，在Internet中可使用多种协议，如FTP、HTTP、HTTPS。
- 域名部分(host)：服务器的域名或者IP地址
- 端口号(port)：跟在域名后的端口，域名和端口之间使用 冒号 作为分隔符，一般端口号默认是80，使用默认端口号时可以省略不写。
- 虚拟目录部分(path)：从域名第一个”/”开始到最后一个”/”为止，指访问资源的路径
- 文件名部分(url-params)：指具体访问的是哪个文件资源，如果没有，则使用默认文件名，如 index.vue、index.html、index.asp。
- 参数部分(query-string)：发送给http服务器的数据，允许有多个参数，使用&链接多个参数。
- 锚部分(anchor)：锚用来定位页面展示的开始位置，是非必须的。
三、HTTP三次握手和四次分手
浏览器在给服务器传输数据之前有三次握手，握手成功之后，才可以传输数据。
三次握手：连接请求，接受请求，发送请求
四次分手：连接请求，接受请求，发送请求，返回数据
四、HTTP请求–Request
客户端包括浏览器给服务器发送请求时，包含四部分：
- 请求行：设置请求类型，要访问的资源以及使用的http版本
- 请求头：用来说明服务器要使用的附加信息，比如token经常放请求头中。传输内容大小有限制，必须小于等于32k。
- 空行：请求头后面所必须的。
- 请求体：请求数据也叫请求体，可以添加任意其他数据。传输内容较多，可小于等于1G。
五、HTTP响应–Response
一般情况下，服务器接收并处理客户端发过来的请求会返回一个HTTP响应消息。包含四部分：
- 状态行：有 http协议版本号、状态码、状态消息三部分组成。
- 消息报头：说明客户端要使用的附加信息。
- 空行：消息报头后面的空行，是必须存在的。
- 响应数据：服务器返回给客户端的文本信息。
六、HTTP状态码
HTTP有请求时，服务器返回的响应Response中状态行内就包含了状态码，状态码主要用来告诉浏览器响应结果。
状态码有三位，主要分为六类：
- 1** ：1开头的状态码主要表示信息类提示，请求已接收，继续处理。
- 2** ：2开头的表示请求成功，200就是最常见的。
- 3** ：3开头的表示重定向，要完成请求必须进行更进一步操作，304最常见
- 4** ：4开头的表示客户端错误，请求语法错误或请求无法实现，404请求资源不存在。
- 5** ：5开头表示服务器错误。500服务器发生不可预期的错误
- 6** ：6开头的扩展类。
七、HTTP请求方法
根据HTTP标准，HTTP请求可以使用多种请求方法。
HTTP1.0定义了三种请求方法：GET、POST、HEAD方法。
HTTP1.1新增了五种请求方法：OPTIONS、PUT、DELETE、TRACE和CONNECT方法。
|
序号 |
方法 |
描述 |
|
1 |
GET |
请求指定的页面信息，并返回实体主体。 |
|
2 |
HEAD |
类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头 |
|
3 |
POST |
向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。 |
|
4 |
PUT |
从客户端向服务器传送的数据取代指定的文档的内容。 |
|
5 |
DELETE |
请求服务器删除指定的页面。 |
|
6 |
CONNECT |
HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。 |
|
7 |
OPTIONS |
允许客户端查看服务器的性能。 |
|
8 |
TRACE |
回显服务器收到的请求，主要用于测试或诊断。 |
|
9 |
PATCH |
是对 PUT 方法的补充，用来对已知资源进行局部更新 。 |