HTTP实用指南 | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第6天

有了今天的学习我发现，HTTP协议常用的知识并不是很难，所以让我们走进它吧。

初识HTTP

什么是HTTP

Hyper Text Transfer Protocol 超文本传输协议
应用层协议，基于TCP
请求响应
简单可扩展
无状态

协议分析

协议分析--发展

HTTP/0.9单行协议（响应只有HTML文档）
HTTP/1.0构建可扩展性
HTTP/1.1标准化协议
HTTP/2更优异的表现

协议分析-报文

Method

Safe(安全的)：不会修改服务器的数据的方法GET HEAD OPTIONS Idempotent(幂等)：同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的所有safe的方法都是Idempotent的GET HEAD OPTIONS PUT DELETE

状态码

200 OK--客户端请求成功
301 --资源（网页等）被永久转移到其它URL
302 --临时跳转
401 Unauthorized --请求未经授权
404 --请求资源不存在，可能是输入了错误的URL
500 --服务器内部发生了不可预期的错误
504 Gateway Timeout --网关或者代理的服务器无法在规定的时间内获得想要的相应

RESTful API

RESTful API: 一种API设计风格

（1）每一个URI代表一种资源；

（2）客户端和服务器之间，传递这种资源的某种表现层；

（3）客户端通过HTTP method,对服务器端资源进行操作，实现“表现层状态转化”

场景分析

打开chrome
输入网址
打开控制台
切换到network

场景分析-静态资源

状态码200一定发起了请求吗？

缓存策略是怎样的？

强缓存

Cache-conteol:一年

还有什么信息吗？

允许所有域名访问

资源类型：css

静态资源方案：缓存+CDN+文件名hash

CDN:Content Delivery Network
通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务

实战

实战-浏览器篇

AJAX之XHR

XHR：XMLHttpRequest readyState

（0）UNSENT 代理被创建，但尚未调用open()方法。

（1）OPENED open()方法已经被调用

（2）HEADERS_RECEIVED send()方法已经被调用，并且头部和状态已经可获得

（3）LOADING 下载中；responseText属性已经包含部分数据

（4）DONE 下载操作已完成

AJAX之Fetch

XMLHttpRequet的升级版
使用Promise
模块化设计，Response,Request,Header对象
通过数据流处理对象，支持分块读取

实战-node篇

标准库：HTTP/HTTPS

默认模块，无需安装其他依赖
功能有限/不是十分友好

常用的请求库：axios

支持浏览器、nodejs环境
丰富的拦截器

实战-用户体验

稳定性

重试机制

1、超时 2、错误

缓存
数据安全

1、HTTPS 2、劫持

其他了解内容

扩展-通信方式

WebSocket

浏览器与服务器进行全双工通讯的网络技术
典型场景：实时性要求高，例如聊天室
URL使用ws:// 或wss:// 等开头

QUIC:Quick UDP Internet Connection

0-RTT建联（首次建联除外）
类似TCP的可靠传输
类似TLS的加密传输，支持完美向前安全
用户空间的拥塞控制，最新的BBR算法
支持h2的基于流的多路复用，但没有TCP的HOL问题
向前纠错FEC
类似MPTCP的Connection migration

总结

有了今天的学习，让我了解了超文本传输协议，对我后续前端的学习帮助也很大。

如果你有任何建议都可以在评论区留言，或发电子邮箱，欢迎大家评论留言(ˆ⌣ˆ）

作者：Yifan

日期：2022年7月24日

电子邮箱：1279640748@qq.com