前端网络涵盖以及文件上传进度条和AI智能客服的流式传输实现～

应用层协议

URL

url用于定位网络服务
url是一个固定格式的字符串
http:// a.com 80 /news/detai1 ？id=1 #t7
schema domain port path query hash
他表达了从网络中哪台计算机domain中的哪个程序port寻找哪个服务path，并注明了获取服务的具体细节path，以及要什么样的协议通信schema。
这里包含看一些细节：

- 当协议是http端口80吗可以忽略端口
- 当协议是https端口为443可以忽略端口
- schema、domain、path都是必要

常见误区

- www.baidu.com/img/1.png
- 不能说明后端有对应的目录和文件例如下node 环境：
- 前端的open live server 其实打开的静态资源服务器所以导致文件和程序一一对应不要混淆。

HTTP

超文本传输协议是一个广泛运用互联网的应用传序层协议。
协议规定两个方面内容：

- 传递消息的模式
- 传递消息的格式

传递消息的模式

客户端发送请求request给我们的服务器，服务器相应我们的response给我们的客户端。

传递消息的格式

请求行Line 响应行Line
请求头 Header 响应行 Header
请求体 body 响应体body

白皮书请求方法不一定只能GET POST也可以FROM可以自定义

响应码

1** 信息，服务器收到请求，需要请求者继续执行操作
2** 成功，操作被接受
3** 重定向，需要进一步的操作以完成请求。 （301 永久重定向 302短暂重定向）
4** 客户端错误，无法请求。备注一下如果后端写try....catch emmmmm 后端的错也会返回4 ，所以代码人为的行为很重要！前端不背锅！**
5** 服务端错误，无法请求。

用户代理

浏览器可以代替用户完成http请求，代替用户解析相应结果，我们称之为用户代理：userAgent

浏览器的两大核心

自动发送请求的能力
自动解析相应的能力

自动发送请求的能力

当一些事情发生的时候，浏览器会代替用户自动发出http请求，常见的包括：

用户在地址栏输入url地址，按下回车 浏览器会自动解析当前url并且发送get请求，抛弃当前页面。
当用户点击a元素 浏览器会自动解析当前href并且发送get请求，抛弃当前页面。
当用户拿到表单的点击提交按钮 浏览器会获取当前form 的action属性地址， 同时拿到method属性值， 然后把表单的数据组织交到请求体当中发送至动画方法抛弃当前页面。
当解析HTML的link，img，video，script元素的时候会自动发送get请求拿到对应的地址。
当用户点击刷新的时候， 浏览器会拿当前的页面地址和当前页面数据发送请求，同时抛弃当前页面。

自动解析响应的能力

识别响应码
根据响应结果作出判断。判断响应头的Content-Type

- text/plain 纯文本浏览器会根据相应体原封不动显示到页面
- text/html html文档
- text/javascript 或 application/javascript js代码，浏览器会使用JS执行引擎解析他执行
- text/css css代码
- image/jpeg 浏览器视为jpg图片
- application/octet-stream 二进制数据
- attachment 触发下载功能

AJAX

AJAX就是在web应用程序中异步向服务器发送请求

它的实现方式有两种，HMLHttpRequest 简称XHR和Fetch（axios库用ajax的xhr的原生能力，umi-request用fetch的原生能力）

功能点	XHR	Fetch
基本的请求能力	✅	✅
基本的获取响应能力	✅	✅
监控请求进度	✅	❌
监控响应进度	✅	✅
ServiceWorker 中是否可用	❌	✅
控制 Cookie 的携带	❌	✅
控制重定向	❌	✅
请求取消	✅	✅
自定义 Referrer	❌	✅
流	❌	✅
API 风格	Event	Promise
活跃度	停止更新	不断更新

fetch的使用demo

ini 复制代码

写法一
const resp=await fetch(https://baidu.com/);
const body=await resp.json();
const data=body.data;

//fetch其实是header过来promise就返回了所以你拿不到他的data必须得等body返回
写法二
fetch('https://baidu.com/')
  .then(resp => {
    return resp.json(); // 等待 body 解析为 JSON
  })
  .then(body => {
    const data = body.data; // 获取 data 属性
  })
  .catch(error => {
    console.error('Error:', error); // 捕获并处理错误
  });

实现文件上传的进度条XHR的demo

ini 复制代码

doms.selectfile.onchange=(e)=>{
  const file=e.target.files[o];
  showArea('progress')
  setprogress(0);
  const reader = new FileReader();/新建文件读取器
  reader.onload=(e=>
    const dataurl=e.target.result;
    console.log(dataurl);
    reader.readAsDataURL(file);//读取为DataURL
}

ini 复制代码

functionupload(file){
  const xhr= new XMLHttpRequest();
  const url= 'http://myserver.com:9527/upload
  single';
  xhr.open('POST',url);
xhr.onload=()=>{
  showarea(result);
}
xhr.upload.onprogress= (e)=>{
  const p=Math.floor(e.loaded/e.total*
  100)
  setprogress(p)
}
  const formData=new FormData();
  formdata.append(avatar,file);
  xhr.send(formData);
}

智能客服流式 fetch实现 demo

ini 复制代码

const resp=await fetch(chat GPT api);
const reader = resp.body.getreader();
const decoder=new TextDecoder();
while (1){
const {done,value} =await reader.read();
if(done){
break;
}
const txt=decoder.decode(value);
robot.append(txt);
robot.over()