前端HTTP实用指南 | 青训营笔记

75 阅读2分钟

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

初始HTTP

截屏2022-08-02 11.02.02.png

初始HTTP-什么是HTTP

  • Hyper Text Transfer Protocol超文本传输协议
  • 应用层协议,基于TCP协议
  • 请求 响应
  • 简单可扩展
  • 无状态 截屏2022-08-02 11.04.07.png

协议分析

协议分析-发展

HTTP/2概述:更快、更稳定、更简单 截屏2022-08-02 11.46.43.png 截屏2022-08-02 11.46.55.png 截屏2022-08-02 11.47.15.png 截屏2022-08-02 11.47.52.png 截屏2022-08-02 11.48.40.png

HTTPS概述

截屏2022-08-02 11.49.16.png 截屏2022-08-02 11.49.44.png HTTP/0.9单行协议

  • 请求GET/mypage.html
  • 响应只有HTML文档 HTTP/1.0构建可扩展性
  • 增加了Header
  • 有了状态码
  • 支持多种文档类型 HTTP/1.1标准化协议
  • 链接复用
  • 缓存
  • 内容协商 HTTP/2更优异的表现
  • 二进制协议
  • 压缩header
  • 服务器推送 HTTP/3草案

协议分析-报文

HTTP/1.1 截屏2022-08-02 11.09.38.png

Method

  • GET 请求一个指定资源的表示形式 使用GET的请求应该只被用于获取数据
  • POST 用于将实体提交到指定的资源 通常导致在服务器上的状态变化或副作用
  • PUT 用请求有效载荷替换目标资源 的所有当前表示
  • DELETE 删除指定的资源
  • HEAD 请求一个与GET请求的响应相同 同的响应,但没有响应体
  • CONNECT 建立一个到由目标资源标识的 服务器的隧道。
  • OPTIONS 用于描述目标资源的通信选项
  • TRACE 沿着到目标资源的路径执行一 个消息环回测试。
  • PATCH 用于对资源应用部分修改。 Safe(安全的):不会修改服务器的数据的方法 Idempotent(幂等):同样的请求被执行一次与连续多次的效果是一样的,服务器的状态也是一样的所有的safe方法都是Idempotent的 GET HEAD OPTIONS PUT DELETE

状态码

  • 200 OK - 客户端请求成功
  • 301 - 资源(网页等)被永久转移到其他URL
  • 302 - 临时跳转
  • 401 Unauthorized - 请求未经授权
  • 404 - 请求资源不存在,可能是输入了错误的URL
  • 500 - 服务器内部发生了不可预期的错误
  • 504 Gateway Timeout - 网关或者代理的服务器无法在规定的时间内获得想要的响应 截屏2022-08-02 11.18.56.png

RESTful API

RESTful API:一种API设计风格;REST-Representational State Transfer (1)每一个URL代表一种资源

(2)客户端和服务器之间,传递这种资源的某种表现层

(3)客户端通过HTTP method,对服务器端资源进行操作,实现“表现层状态转化” 截屏2022-08-02 11.39.25.png

常用请求头

截屏2022-08-02 11.41.15.png

常用响应头

截屏2022-08-02 11.41.42.png

缓存

截屏2022-08-02 11.42.09.png 截屏2022-08-02 11.44.39.png

Cookie

Set-Cookie-response 截屏2022-08-02 11.45.24.png

场景分析

场景分析-静态资源

截屏2022-08-02 11.50.42.png 截屏2022-08-02 11.50.56.png

场景分析-跨域

截屏2022-08-02 11.52.04.png

场景分析-登陆

截屏2022-08-02 11.52.36.png

实战-浏览器篇

AJAX之XHR

截屏2022-08-02 11.53.44.png

AJAX之Fetch

截屏2022-08-02 11.54.28.png

实战Node篇

标准库:HTPP/HTTPS

截屏2022-08-02 12.02.19.png 常用的请求库:axios

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

实战-用户体验

截屏2022-08-02 12.06.29.png

稳定性

截屏2022-08-02 12.06.54.png

扩展-通信方式

WebSocket

截屏2022-08-02 12.07.35.png

QUIC:Quick UDP Internet Connection

截屏2022-08-02 12.08.41.png