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

什么是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 方法的补充，用来对已知资源进行局部更新 。

版权声明：转载此文是出于传递更多信息之目的。若有来源标注错误或侵犯了您的合法权益，请作者持权属证明与本网联系，我们将及时更正、删除，谢谢您的支持与理解。