update

Author: MuGuiLin

NET网络请求/Fetch API/Navigator.sendBeacon()用法示例.html

@@ -303,7 +303,7 @@ <h3>与传统方法的比较</h3>
  });
 
  // 使用 sendBeacon 发送数据
- const success = navigator.sendBeacon('https://httpbin.org/post', data);
+ const success = navigator.sendBeacon('http://127.0.0.1:666/api/v1/insert', data);
 
  if (success) {
  addLog('sendBeacon 请求已成功加入发送队列', 'success');
@@ -325,7 +325,7 @@ <h3>与传统方法的比较</h3>
  testId: 'unload_test_' + Date.now()
  });
 
- navigator.sendBeacon('https://httpbin.org/post', data);
+ navigator.sendBeacon('http://127.0.0.1:666/api/v1/insert', data);
  });
 
  // 3秒后跳转
@@ -353,7 +353,7 @@ <h3>与传统方法的比较</h3>
  timeSpent: Math.round(performance.now())
  });
 
- navigator.sendBeacon('https://httpbin.org/post', data);
+ navigator.sendBeacon('http://127.0.0.1:666/api/v1/insert', data);
  });
 
  // 添加一些模拟分析事件
@@ -367,7 +367,7 @@ <h3>与传统方法的比较</h3>
  });
 
  // 使用 sendBeacon 发送点击数据
- navigator.sendBeacon('https://httpbin.org/post', data);
+ navigator.sendBeacon('http://127.0.0.1:666/api/v1/insert', data);
  });
  </script>
 </body>

NET网络请求/Fetch API/Navigator.sendBeacon()请求方式详解.html

@@ -404,7 +404,7 @@ <h3>代码示例</h3>
  // 测试发送字符串数据
  testStringBtn.addEventListener('click', function() {
  const data = `event=button_click&id=testString&time=${Date.now()}&random=${Math.random()}`;
- const success = navigator.sendBeacon('https://httpbin.org/post', data);
+ const success = navigator.sendBeacon('http://127.0.0.1:666/api/v1/insert', data);
 
  if (success) {
  addLog('字符串数据已加入发送队列', 'success');
@@ -420,7 +420,7 @@ <h3>代码示例</h3>
  formData.append('timestamp', Date.now().toString());
  formData.append('userAgent', navigator.userAgent);
 
- const success = navigator.sendBeacon('https://httpbin.org/post', formData);
+ const success = navigator.sendBeacon('http://127.0.0.1:666/api/v1/insert', formData);
 
  if (success) {
  addLog('FormData 已加入发送队列', 'success');
@@ -439,7 +439,7 @@ <h3>代码示例</h3>
  };
 
  const blob = new Blob([JSON.stringify(jsonData)], { type: 'application/json' });
- const success = navigator.sendBeacon('https://httpbin.org/post', blob);
+ const success = navigator.sendBeacon('http://127.0.0.1:666/api/v1/insert', blob);
 
  if (success) {
  addLog('Blob 数据已加入发送队列', 'success');
@@ -456,7 +456,7 @@ <h3>代码示例</h3>
  view[0] = 123456;
  view[1] = 789012;
 
- const success = navigator.sendBeacon('https://httpbin.org/post', buffer);
+ const success = navigator.sendBeacon('http://127.0.0.1:666/api/v1/insert', buffer);
 
  if (success) {
  addLog('ArrayBuffer 数据已加入发送队列', 'success');
@@ -481,7 +481,7 @@ <h3>代码示例</h3>
  referrer: document.referrer
  });
 
- navigator.sendBeacon('https://httpbin.org/post', data);
+ navigator.sendBeacon('http://127.0.0.1:666/api/v1/insert', data);
  addLog('页面卸载事件已触发，sendBeacon 已调用', 'info');
  });
 
@@ -511,7 +511,7 @@ <h3>代码示例</h3>
  timeSpent: Math.round(performance.now())
  });
 
- navigator.sendBeacon('https://httpbin.org/post', data);
+ navigator.sendBeacon('http://127.0.0.1:666/api/v1/insert', data);
  });
  </script>
 </body>

NET网络请求/Fetch API/koa-server/app.js

@@ -26,17 +26,21 @@ App.use(
  },
  maxAge: 5, //指定本次预检请求的有效期，单位为秒。
  credentials: true, //是否允许发送Cookie
- // allowMethods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"], //设置所允许的HTTP请求方法
+ allowMethods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"], //设置所允许的HTTP请求方法
  // allowHeaders: ["Content-Type", "Authorization", "Accept"], //设置服务器支持的所有头信息字段
  // exposeHeaders: ["WWW-Authenticate", "Server-Authorization"], //设置获取其他自定义字段
  })
 );
 
-Router.get("/", (ctx, next) => {
+// 默认get路由
+Router.get("/", async (ctx, next) => {
  ctx.body = "欢迎使用 Koa Server！";
+ await next();
 })
- .get("/random.js", (ctx, next) => {
- var arr = [
+
+ // get
+ .get("/random.js", async (ctx, next) => {
+ const arr = [
  "http://www.baidu.com",
  2,
  "https://www.2345.com/?kmupiao",
@@ -60,13 +64,16 @@ Router.get("/", (ctx, next) => {
  })
 
  // post
- .post("/post-logs", async (ctx, next) => {
+ .post("/insert", async (ctx, next) => {
  console.log(ctx.request);
- console.log(ctx.request.body);
+ console.log('query:', ctx.query);
+ console.log('body:', ctx.request.body);
+
  ctx.body = {
  code: 200,
  data: {
  list: [],
+ res: ctx.request.body,
  },
  message: "post ok!",
  timestamp: Date.now(),
@@ -76,7 +83,8 @@ Router.get("/", (ctx, next) => {
  // put
  .put("/update", async (ctx, next) => {
  console.log(ctx.request);
- console.log(ctx.request.body);
+ console.log('query:', ctx.query);
+ console.log('body:', ctx.request.body);
 
  ctx.body = {
  code: 200,

NET网络请求/Fetch API/如何在关闭浏览器标签前，可靠地发送 HTTP 请求.html

@@ -43,7 +43,7 @@ <h3>解决方案一：navigator.sendBeacon()</h3>
  可靠性高： 由浏览器保证发送，不受页面卸载影响。
  异步非阻塞：不影响用户关闭页面的速度和体验。
  使用简单：API 非常直观。
- 数据有限制：只能单向发送 POST 请求【只支持POST请求】，且无法自定义请求头（Headers）
+ 数据有限制：只能单向(不能处理响应)的发送 POST 请求【只能POST请求】，且无法自定义请求头（Headers）
 
  <h3>解决方案二：fetch() 与 keepalive: true</h3>
  fetch API 作为现代网络请求的基石，也提供了一种优雅的解决方案。
@@ -71,23 +71,32 @@ <h3>解决方案二：fetch() 与 keepalive: true</h3>
  {
  function sendBeaconData() {
  // 要发送的数据，内容格式都可自定义
- const data1 = {
+ const data1 = JSON.stringify({
  lastAction: "close_tab",
  content: "我是要发送的数据",
+ url: window.location.href,
+ timestamp: Date.now(),
  timeOnPage: Math.round(performance.now()),
- };
+ });
 
  // 将数据转换为 Blob类型（这是 sendBeacon 支持的格式之一）
- const blob = new Blob([JSON.stringify(data1)], {
+ const body = new Blob([data1], {
  type: "application/json; charset=UTF-8",
  });
 
+ // 创建一个 URLSearchParams 对象，将数据转换为查询字符串
+ const params = new URLSearchParams();
+ params.append("lastAction", "close_tab");
+ params.append("content", "我是要发送的数据");
+ params.append("timestamp", Date.now());
+
  // 使用 sendBeacon 发送数据
  // 该方法会返回 true (成功加入队列) 或 false (数据过大或格式错误)
  const success = navigator.sendBeacon(
- "https://www.example.com/api/v1/post-logs",
- blob
+ "http://127.0.0.1:666/api/v1/insert?" + params.toString(),
+ body
  );
+
  if (success) {
  console.log("OK，要发送的数据已成功加入发送队列！");
  } else {
@@ -142,7 +151,7 @@ <h3>解决方案二：fetch() 与 keepalive: true</h3>
  // 在这种情况下，我们通常不发送信标
  return;
  }
- fetchSendData();
+ // fetchSendData();
  });
 
  document.querySelector("#fetch-btn").onclick = function () {