青训营X豆包MarsCode 技术训练营—HTTP协议实战|豆包MarsCodeAI刷题

玖玖passion
184 阅读5分钟

前言

我们该如何发起http协议呢？我们可以通过不同的环境来看看,在浏览器环境里边内置了一个XHR(AJAX技术):XMLHttpRequest这个对象是专门发出请求的,xhr.readyState===(0~4),readyState在网络请求和文档加载过程中通常用于表示某种对象的状态。当为0的时候表示代理被创建。当为1的时候表示open()方法已经被调用。当为2的时候send()方法已经被调用并且头部和状态已经可获得。当为3的时候表明下载中responseText属性已经包含部分数据。当为4的时候表明下载操作完成。 xhr有open和send方法 open()里边三个参数可以选择method,url,async。method可以选择:GET、PUT、POST、DELETE。url为请求的路径。async为bool值表示是否请求异步。xhr.send()可以传入data参数。 data（可选）：要发送的数据。根据请求方法的不同，data 的格式也会有所不同：

GET 请求：通常不需要传递数据，data 为 null。

POST 请求：可以传递字符串、FormData 对象或其他类型的数据。

PUT、DELETE 请求：同样可以传递数据，具体格式取决于服务器的要求。 xhr还有一个onreadystatechange事件。当 readyState 发生变化时会被调用。通常在这个函数中，你会检查 readyState 和 status 属性来决定如何处理请求的不同阶段。 我们可以通过下边的代码来看看！！

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true); 
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) 
  { // 请求完成 if (xhr.status === 200){
  // 请求成功 console.log(xhr.responseText); 
  } else { console.error('请求失败，状态码：', xhr.status); }
  }
  };
  xhr.send();

AJAX之Fetch

首先呢Fetch是XMLHttpRequest的升级版本,它有如下的特点:使用Promise(从而解决回调地狱的问题),它还有一些模块化的设计,如Response,Request,Header对象。它还能通过数据处理对象,支持分块读取。 我们可以在fetch()里边输入url,和一个可选对象包括请求的配置项:方法、请求信息、请求体等。


fetch('https://api.example.com/data',
{
method: 'POST', 
headers: { 'Content-Type': 'application/json' }, 
body: JSON.stringify({ key: 'value' }) }//请求体一个字符串表示要发送的数据,js对象转化为json字符串
) .then(response => 
{ 
 if (response.ok) { return response.json(); // 解析响应为 JSON
} 
else { throw new Error('请求失败，状态码：' + response.status); } })
.then(data => { console.log(data); }) 
.catch(error => { console.error(error); });

node标准库

在node里边有HTTP/HTTPS来帮我们发起请求。它是一个默认的模块,无需安装其它的依赖,功能十分有限不是很友好。我们可以看下边代码！！

  const https = require('https');
  const options = {
  hostname: 'api.example.com',
  port: 443, path: '/data',
  method: 'GET',
  headers:
  { 'Content-Type': 'application/json' } 
  };
  const req = https.request(options,   (res) => { 
  let data = ''; 
  res.on('data', (chunk) => { data += chunk; });
  res.on('end', () => { console.log('Response:', data); }); });
  req.on('error', (error) => { console.error('Request error:', error.message); 
  });    
  req.end();

在真实的开发中我们会把请求相关的东西做进一步的封装,比如axios就是一个请求封装库。它里边做了一些逻辑判断帮我们识别出当前所属的不同的环境,如:浏览器环境,nodejs环境。最值得一提的是它里边封装了一些丰富的api,比如它里边有拦截器(在发起请求前做一些事情)。

用户体验

在实际上,在使用http中不是只发起请求就ok的我们希望尽量的做到用户体验最优。网络优化是用户体验比较重要的一个部分。我们可以做如下的考虑: http2它更快更稳定。或者用CDN进行动态加速,DNS预解析,网络预连接。数据压缩,https性能优化(有一个加解密的过程),域名收敛或发散。 在另一个方面我们应当要考虑稳定性。1.我们可以使用重试机制(当出现错误或者超时的时候) 重试是保证稳定的有效手段,但是要防止加剧恶劣的情况,因为有可能会让我们的server出现雪崩的状态,要慎重使用。2.我们也能运用缓存来使得稳定性。当我们断开了连接,这时候本地有一份缓存的数据,这时候可以作为我们兜底的策略。3.我们的数据请求会有大量数据被劫持的情况,可能会被插入一些其它商家的广告,我们用户体验是很差的,这样看来数据安全也是十分慎重考虑的一点。

通信方式

我们从客户端和服务器沟通的角度来考虑的话,我们可以选择http,这也是我们常用的选择。但是我们要考虑到一些特殊的场景。比如聊天室这种实时性要求特别高的场景,我们可以选择websocket这种方案。它是一种服务器和浏览器进行全双工通讯的网络技术。通常是ws:// 或 wss: //等开头。 http通信底层来讲它的传输层是基于tcp,可靠性高。但是会出现对头拥塞的问题,我们可以考虑传输层的另一个协议——udp(无连接,速率快,优化传输体验) 另外我们还能选择QUIC(基于udp封装的新版本协议基本不耗时)通过一些封装实现了一些类似于tcp可靠的传输。也会实现类似TLS的加密传输。 好啦今天就分享到这里了！

avatar
文章
阅读
粉丝