首页 > 其他分享> > 05前端面试必备http

05前端面试必备http

2021-07-17 16:02:05 作者：互联网

http

http状态码
- 状态码分类
- 常见状态码
http methods
http headers
http缓存

题目
http常见的状态码有哪些？
http常见的header有哪些？
什么是Restful API
描述一下http的缓存机制（重要）
	从强制缓存和协商缓存角度回答。流程图记住。

http状态码

状态码分类

1xx 服务器收到请求
2xx 请求成功，如200
3xx重定向，如302
4xx客户端错误，如404
5xx服务端错误，如500

常见状态码

200成功
301永久重定向（配合location，浏览器自动处理）
	场景：老域名到期换新域名
302临时重定向（配合location，浏览器自动处理）
	服务器返回302和location，客户端会自动跳到location地址。
	比如百度网页搜菜鸟教程，访问url是百度的一个链接，但跳到菜鸟教程主页	
304 资源未被修改
	请求资源时，刚才本地请求到的资源还有效，服务器不会再发一遍
404资源未找到
403没有权限
500服务器错误
504网关超时

http methods

传统的methods

get获取服务器的数据
post向服务器提交数据
简单的网页功能，就这两个操作

现在的methods

get获取数据
post新建数据
patch/put更新数据
delete删除数据

Restful API

一种新的API设计方法（早已推广使用）
传统API设计：把每个url当做一个功能
Restful API设计：把每个url当做一个唯一的资源


如何设计成一个资源？
尽量不用url参数
用method表示参数类型

-不适用url参数
传统API设计：/api/list?pageIndex=2
Restful API设计:/api/list/2

-用method表示操作类型
传统API设计
	post请求  /api/create-blog
	post请求  /api/update-blog?id=100
	get请求    /api/get-blog?id=100
Restful API设计
	post请求 	/api/blog
	patch请求 /api/blog/100
	get请求  	/api/blog/100

记住：不要在url中做参数，以及method做参数类型

http headers

常见的Request Headers

Request Headers
Accept 浏览器可接收的数据格式
Accept-Encoding 浏览器可接收的压缩算法 ，如gzip
Accept-Language 浏览器可接收的语言，如zh-CN
Connection：keep-alive 一次TCP连接重复使用
cookie
Host：域名
User-Agent（简称UA）浏览器信息
Content-type发送数据的格式，如application/json

常见的Response Headers

Content-type 返回数据的格式，如application/json
Content-length 返回数据的大小，多少字节
Content-Encoding 返回数据的压缩算法，如gzip
Set-Cookie

自定义Headers

axios/Request-Config

// `headers` are custom headers to be sent
  headers: {'X-Requested-With': 'XMLHttpRequest'},

缓存相关的headers

Cache-Control	  Expires
Last-Modified	 If-Modified-Since
Etag 			 If-None-Match

http缓存

关于缓存

什么是缓存？把一些没有必要重新获取的东西，存起来，以防再重新获取

为什么需要缓存？
让页面加载的更快。
网络请求耗时较多，尽可能少减少网络请求的量。
网络请求的不稳定，比如信号不好的山区。

哪些资源可以被缓存？——静态资源（js css img）
网站的html一般是不能被缓存的，时刻更新。
网络的业务数据，比如留言板信息随时更新

http缓存——强制缓存

Cache-Control

过程：浏览器向服务器初次请求时，服务器返回资源和Cache-Control。
当再次进行请求时，浏览器先在本地缓存进行查找，资源没有过期，则返回资源。
如果资源过期了，那么浏览器再次向服务器请求，服务器返回资源和Cache-Control
在这里插入图片描述

Cache-Control
-Response Headers服务端控制
-控制强制缓存的逻辑
例如Cache-Control：max-age=31536000（单位秒）
最大缓存时间31536000

Cache-Control的值
max-age 最大缓存时间
no-cache 告知（代理）服务器不直接使用缓存
要求向原服务器发起请求
no-store 所有内容都不会被保存到缓存中
private  仅开放给某些用户做缓存
public 任何情况下都得缓存该资源

参考：cache-control

关于Expires

同在Response Headers中
同为控制缓存过期
已被Cache-Control代替

http缓存——协商缓存（对比缓存）

服务端缓存策略：服务端判断一个资源是否可被缓存的策略，并不是资源缓存在服务端
服务器判断客户端资源，是否和服务端资源一样
一致则返回304（资源未被修改），否则返回200和最新的资源
在这里插入图片描述

在Response Headers中，有两种
-Last-Modified 资源的最后修改时间
-Etag 资源的唯一标识（一个字符串）

Last-Modified

在这里插入图片描述

If-Modified-Since带着最近一次Last-Modified的返回时间

Etag

浏览器向服务器初次请求，服务器返回资源和Etag。
当再次请求时，Request Headers带着if-None-Match（最新的Etag值）发送给服务器。
服务器和Etag的值比较，未发生改变，则返回304。客户端从本地缓存取资源。
否则，返回资源和新的Etag
在这里插入图片描述

Headers信息：在这里插入图片描述
请求示例：

Last-Modified和Etag

-会优先使用Etag
-Last-Modified只能精确到秒级
-如果资源被重复生成，而内容不变，则Etag更精确

在这里插入图片描述

刷新页面对http缓存影响

三种刷新操作
正常操作：地址栏输入url，跳转链接，前进后退等
手动刷新：F5，点击刷新按钮，点击菜单刷新
强制刷新：ctrl+F5

不同刷新操作，不同的缓存策略
正常操作：强制缓存有效，协商缓存有效
手动刷新：强制缓存失效，协商缓存有效
强制刷新：强制缓存失效，协商缓存失效

标签：缓存,http,请求,05,必备,Headers,Etag,资源
来源： https://blog.csdn.net/qq_44089555/article/details/118853069