关于http：（http报文）（http状态码）（强缓存、协商缓存）

最新推荐文章于 2025-04-24 21:52:10 发布

原创最新推荐文章于 2025-04-24 21:52:10 发布 · 973 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了HTTP事务的概念，详细阐述了不同类型的HTTP状态码，如200、201、204、301、302、304等，并探讨了浏览器的强缓存和协商缓存机制，包括Expires、cache-control、ETag、If-None-Match和Last-Modified等关键字段的作用。

# http

1、http事务 http请求：都是指的一次完整的http请求（请求+响应）

通用头
在这里插入图片描述

2、http状态码

1~5开头的三位数字
- 200 OK：成功
- 201 CREATE：一般应用于告诉服务器创建一个新文件，最后服务器创建成功以后返回状态码
-
- 204 NO CONTENT：对于某些请求(例如PUT或者DELETE)，服务器不想处理，可以返回空内容，但是这次请求也是成功的，返回状态码是204
- 301 ：永久重定向一般用于域名的迁移
- 302 ：临时重定向 (比如服务器压力比较大，把压力暂时分出去)只能重定向get ==>服务器的负载均衡等
- 307：临时重定向get、post都可以
- 304 ：设置HTTP的协商缓存（代表后台告诉前端，这个请求的内容没有发生改变，可以使用之前的缓存）
- 4xx 一般前端的问题
- 400 ：传递给服务器的参数错误
- 401 ：没有权限访问
- 402 ：一般是没权限（和后台说）
- 403 ：请求被拒绝
- 404 ：请求地址错误（接口地址错误）//常见
- 405 ：方法使用错误：比如：后台要求使用get 你用了其他方式
- 5xx 5开头的都是后端的问题
- 500 ：服务器的未知错误
- 503 ：服务器超负荷
常见： 200 304 404 500 503这几个

3、浏览器缓存（强缓存、协商缓存）

强缓存：这种请求是到不了后台：直接是从本地缓存中获取资源，然后相应这个请求
Expires过期时间，在这个过期时间之内的请求，都会直接从本地缓存获取资源;
cache-control: max-age=3600；max-age 缓存的有效时间3600秒
强缓存的优缺点（优点：最省事，后端没压力前端速度反应也快。缺点：若后台文件有变化有更新则用户拿到的依然是旧数据）
解决强制缓存的手段：通过挂问号（后边是参数）随机数不走强缓存

     不走强缓存，直接去后台申请
          // 如果当前是get系列请求，而且cache的值是false，那就在url后边拼接一个时间戳或者字符串
          if (reg.test(method) && !cache) {
               let mark = url.includes('?') ? "&" : "?";
               url += `${mark}_=${Math.random()}`
          }

协商缓存：如果没有命中强缓存，才会有可能走协商缓存，确实是去后台要东西，但是后台告诉前端，这个请求可以使用缓存的内容：(304)
两个字段：
etag/if-none-match：etag是后端生成的hash（一个字符串）浏览器会在请求头中添加一个if-none-match的属性，这个属性对应的值，就是后台给的etag对应值。
last-modified/if-modified-since：last-modified后台生成的一个时间，其实就是当前请求的内容最后一次更改的时间下一次请求中，会带上if-modified-since这个属性值是if-modified-since对应的值，文件的修改时间，精确到秒。
既没有走强缓存，也没有走协商缓存，那么这个请求才是一个真正的请求

在这里插入图片描述