前后端数据交互(一)——网络请求详解

前后端分离之后，网络请求是前端的必备技能。网络请求中浏览器工作流程，你了解多少？

一、什么是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包括以下几部分：

1. 协议部分(schema)：指定底层使用的协议，在Internet中可使用多种协议，如FTP、HTTP、HTTPS。
2. 域名部分(host)：服务器的域名或者IP地址
3. 端口号(port)：跟在域名后的端口，域名和端口之间使用 冒号 作为分隔符，一般端口号默认是80，使用默认端口号时可以省略不写。
4. 虚拟目录部分(path)：从域名第一个"/"开始到最后一个"/"为止，指访问资源的路径
5. 文件名部分(url-params)：指具体访问的是哪个文件资源，如果没有，则使用默认文件名，如 index.vue、index.html、index.asp。
6. 参数部分(query-string)：发送给http服务器的数据，允许有多个参数，使用&链接多个参数。
7. 锚部分(anchor)：锚用来定位页面展示的开始位置，是非必须的。

三、HTTP三次握手和四次分手

浏览器在给服务器传输数据之前有三次握手，握手成功之后，才可以传输数据。

三次握手：连接请求，接受请求，发送请求

四次分手：连接请求，接受请求，发送请求，返回数据

四、HTTP请求--Request

客户端包括浏览器给服务器发送请求时，包含四部分：

1. 请求行：设置请求类型，要访问的资源以及使用的http版本
2. 请求头：用来说明服务器要使用的附加信息，比如token经常放请求头中。传输内容大小有限制，必须小于等于32k。
3. 空行：请求头后面所必须的。
4. 请求体：请求数据也叫请求体，可以添加任意其他数据。传输内容较多，可小于等于1G。

五、HTTP响应--Response

一般情况下，服务器接收并处理客户端发过来的请求会返回一个HTTP响应消息。包含四部分：

1. 状态行：有 http协议版本号、状态码、状态消息三部分组成。
2. 消息报头：说明客户端要使用的附加信息。
3. 空行：消息报头后面的空行，是必须存在的。
4. 响应数据：服务器返回给客户端的文本信息。

六、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方法。