网络请求协议相关&SSE

JSON WEB TOKEN （JWT）

组成：Header(头部).Payload(有效荷载).Signature(签名) Header.Payload.Signature
Payload：真正的用户信息经过加密后生成的字符串
Header和Signature：是安全性相关部分

浏览器提交账号密码 => 服务器验证 => 通过后加密生成token字符串并返回给浏览器 => 浏览器在请求头的Authorization字段将token发给服务器 => 服务器解密验证信息 => 认证成功返回请求所需内容给浏览器

取消axios请求

通过AbortController 实现，是一个用于中断异步操作的 Web API 接口。

通过 new AbortController() 创建一个 AbortController 实例，给controller
请求时将 controller.signal 设置为请求的 signal 参数，设置取消请求的标识
取消请求则调用controller.abort()方法即可

import api from './api/api' //导入API
var controller 
var controller2
const getData = async () => {
  controller = new AbortController();
  await api.getData10s(controller.signal)
}
const getData2 = async () => {
  controller2 = new AbortController();
  await api.getData5s(controller2.signal)
}
const cancel = () => {
  controller.abort()
  controller2.abort()
}

//api内的写法 定义个signal参数，
import request from "../../utils/request";
export default {
    getData10s(signal) {
        return request({
            url: "/getdata/123",method: "get",
            signal: signal, // 传递 signal 参数
        });
    },
    getData5s(signal) {
        return request({
            url: "/getdata",method: "get",
            signal: signal, // 传递 signal 参数
        });
    },
};

请求失败自动重试---通过插件axios-retry实现

axios自带的则是需要配置retries和retryDelay来设置重试次数和等待间隔，然后在响应失败的拦截器中error.config中获取到请求的一些信息参数，包括url以及请求的一些参数和方式等等，还需要对请求的次数进行+1操作，最后还需要return一个promise对象，这个promise对象内要return出axios实例并传入刚刚获取到的config，比较麻烦，所以我一般都是采用axios-retry来实现

import axios from 'axios'
import axiosRetry from 'axios-retry'  #1
const request = axios.create({
    baseURL: 'http://127.0.0.1:3007/api',
    timeout: 8000,
    //axios自带的 需要手动处理 不方便 所以采用插件
    // retries: 3, // 设置重试次数为3次
 	// retryDelay: 1000, // 设置重试的间隔时间
})

#2
// axios-retry 插件
axiosRetry(request, {
    retries: 3, // 设置重试次数
    retryDelay: () => 500, // 设置重试延迟时间
    shouldResetTimeout: true, // 重置请求超时时间
    retryCondition: (error) => ['ECONNABORTED', 'ERR_NETWORK'].includes(error.code), // 重试条件
})

Chat-GPT(聊天实现) SSE服务器发送事件 (Server-Sent Events)

常用于 Web 页面推送数据和信息,数据信息只能从服务端到发送到客户端（如用户的浏览器）。后端要在响应头配置'Content-Type': 'text/event-stream'
推荐使用fetch实现，因为EventSource只能发送 GET 请求，传参受限，而且还无法设置请求头

const article = ref('')// 存储文章内容
let controller3//中断器

const connectSSE = async () => {
  controller3 = new AbortController()  // 创建一个新的请求中止控制器
  const res = await fetch('http://127.0.0.1:3007/api/chat', {
    signal: controller3.signal,//定义中断器，用户可终止
    method: 'POST', // 使用 POST 方法发送请求
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ user: 'itheima' }),//向后端传递参数
  })
  const reader = res.body?.getReader()// 获取响应内容的 ReadableStream
  while (reader) {//开启无限循环获取内容  也可以使用for (;;) {代替 也是无限循环的意思
    const { done, value } = await reader.read() // 读取响应内容
    if (done) {//如果后端响应完了，那么done就会变成true
      closeSSE() // 如果请求已经完成，中止请求
      break// 退出循环
    }
    const decoder = new TextDecoder() // 创建一个解码器，用来解码文本
    article.value += decoder.decode(value)// 将解码后的文本添加到文章内容中
  }
}

// 关闭 SSE 连接
const closeSSE = () => {
  controller3.abort()// 中止请求
}

浏览器缓存

#强缓存：在该周期内将直接从缓存中获取数据，而不用向服务器发送请求
// 添加强缓存控制头  在axios请求拦截器内配置   需要前后端都配置
    // 在这里可以添加一些缓存相关的配置
  if (config.method === 'get') {
    // 使用时间戳或其他参数来确保每次请求都是唯一的，防止缓存
    config.params = {
      ...config.params,
      timestamp: Date.now(),
    };
    // 添加强缓存控制头
    config.headers['Cache-Control'] = 'max-age=300'; // 缓存 5 分钟
  }

#协商缓存通过响应头(后端)ETag与Last—Modified进行控制，每次发送请求进行新鲜度校验，如果资源过旧就从响应数据中获取，否则就从浏览器缓存中获取。新鲜度校验通过请求头（前端）If-None-Match与响应头Etag对比
// 在这里可以添加一些协商缓存相关的配置
  if (config.method === 'get') {
    // 在这里获取上次响应的信息，假设存在 lastModified 和 etag 变量
    const lastModified = getLastModifiedFromSomewhere();
    const etag = getETagFromSomewhere();

    // 添加协商缓存条件到请求头
    config.headers['If-Modified-Since'] = lastModified;
    config.headers['If-None-Match'] = etag;
  }

http和https的区别

安全性：
HTTP： 是一种明文传输协议，数据在传输过程中不加密，容易被中间人窃听或篡改。
HTTPS： 是在HTTP的基础上加入了安全性的协议。它通过使用 SSL/TLS 协议对数据进行加密，使得传输的数据更加安全，难以被窃听和篡改。

加密方式：
HTTP： 使用明文传输，数据不经过加密处理。		HTTPS： 使用 SSL/TLS 协议对数据进行加密，确保数据的隐私性和完整性。

端口：
HTTP： 默认使用端口80。		HTTPS： 默认使用端口443。

证书：
HTTP： 不需要证书。	HTTPS： 需要在服务器上安装 SSL 证书，用于验证服务器的身份。这由证书颁发机构签发。

get 和post的区别

	get
			1. 在url后面拼接参数,只能以文本的形式传递数据
			2. 传递的数据量小,4KB左右
			3. 安全性低, 会将数据显示在地址栏
			4. 速度快,通常用于安全性要求不高的请求
			5. 会缓存数据
	post
		    1. 安全性比较高
			2. 传递数据量大,请求对数据长度没有要求
			3. 请求不会被缓存,也不会保留在浏览器历史记录里

项目中常遇到的状态码

200  请求成功,  2开头的异步表示请求成功
304  请求被允许,但请求内容没有改变, 3开头的一般请求完成 如浏览器缓存
400  请求格式错误,  4开头的一般表示请求错误
401  token过期
404  请求的资源(网页)不存在,  
500  内部服务器错误,  5开头的一般都是指服务器错误

什么是同源策略？怎么解决跨域问题

   同源策略: 同源策略是浏览器的一种安全策略, 所谓同源是指域名、协议、端口完全相同，不同源则跨域。
   解决跨域的方法: 
			1. 通过jsonp跨域 只支持 GET 请求，并且需要后端支持 JSONP
			2. 跨域资源共享（CORS  Access-Control-Allow-Origin: http://api.bob.com）
			3. nginx代理跨域

对WebSocket了解哪些

WebSocket 是全双工通信  HTML5一种新的协议。实现浏览器与服务器，更好的节省服务器资源和带宽并达到实时通讯，
	1. WebSocket是一种双向通信协议，在建立连接后提供了双向通信，允许客户端和服务器之间建立持久性连接，可以在连接建立后双向传输数据。
	2. WebSocket 握手是在建立连接之前的一个过程，但它是基于 HTTP 协议的。一旦握手成功，之后的通信就在一个持久的连接上进行，不再需要重新握手。
    
HTTP 是半双工通信   请求-响应协议，客户端发送请求，服务器端返回响应。通常是单向通信，即客户端发起请求，服务器响应后连接即断开。

在地址栏输入网址，到数据返回的过程是什么？

1. 输入url地址后，首先进行DNS解析，将相应的域名解析为IP地址。
2. 根据IP地址去寻找相应的服务器。
3. 与服务器进行TCP的三次握手，建立连接。
4. 客户端发送请求，找到相应的资源库。
5. 客户端拿到数据，进行相应的渲染。

axios的特点有哪些

1、Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API
2、它可以拦截请求和响应
3、它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据

网络请求协议相关&SSE ​

JSON WEB TOKEN （JWT） ​

取消axios请求 ​

请求失败自动重试---通过插件axios-retry实现 ​

Chat-GPT(聊天实现) SSE服务器发送事件 (Server-Sent Events) ​

浏览器缓存 ​

http和https的区别 ​

get 和post的区别 ​

项目中常遇到的状态码 ​

什么是同源策略？怎么解决跨域问题 ​

对WebSocket了解哪些 ​

在地址栏输入网址，到数据返回的过程是什么？ ​

axios的特点有哪些 ​

网络请求协议相关&SSE

JSON WEB TOKEN （JWT）

取消axios请求

请求失败自动重试---通过插件axios-retry实现

Chat-GPT(聊天实现) SSE服务器发送事件 (Server-Sent Events)

浏览器缓存

http和https的区别

get 和post的区别

项目中常遇到的状态码

什么是同源策略？怎么解决跨域问题

对WebSocket了解哪些

在地址栏输入网址，到数据返回的过程是什么？

axios的特点有哪些