Beacon API & multipart/form-data & JSON

Beacon API & multipart/form-data & JSON

https://stackoverflow.com/questions/45847276/navigator-sendbeacon-with-application-x-www-form-urlencoded

Blob to JSON

demos

// const wxRobot = (params = {}, desc = '') => {
//   // 测试 robot, Beacon API
//   const url = 'http://localhost:3000/api/beacon';
//   const obj = {
//       msgtype: 'markdown',
//       markdown: {
//           content: `
// desciption: ${desc}\n
// data: ${JSON.stringify(params, null, 4)}\n
//           `,
//       },
//   };
//   // 1. Query String
//   const options = new URLSearchParams({
//       key : 'id',
//       values : '123',
//   });
//   navigator.sendBeacon(url, options);
// };

// const wxRobot = (params = {}, desc = '') => {
//   // 测试 robot, Beacon API
//   const url = 'http://localhost:3000/api/beacon';
//   const obj = {
//       msgtype: 'markdown',
//       markdown: {
//           content: `
// desciption: ${desc}\n
// data: ${JSON.stringify(params, null, 4)}\n
//           `,
//       },
//   };
//   // 2. FormData String
//   let data = new FormData();
//   for (const key of Object.keys(obj)) {
//       data.append(key, obj[key]);
//   }
//   if(desc) {
//       data.append('desc', desc);
//   }
//   navigator.sendBeacon(url, data);
// };

const wxRobot = (params = {}, desc = '') => {
  // 测试 robot, Beacon API
  const url = 'http://localhost:3000/api/beacon';
  const obj = {
      msgtype: 'markdown',
      markdown: {
          content: `
desciption: ${desc}\n
data: ${JSON.stringify(params, null, 4)}\n
          `,
      },
  };
  // 3. JSON Object
  const options = new Blob(
      [JSON.stringify(obj)],
      {type : 'application/json'}
  );
  navigator.sendBeacon(url, options);
};

// wxRobot(params, desc);

/*

const params = {
    "user": "Eric",
    "os": "macOS",
    "browser": "Chrome",
};
wxRobot(params, '✅ beacon api & json');

*/

Beacon API

https://cdn.xgqfrms.xyz/Beacon-API/beacon-api-json.html

Content-Type header that Beacon API use, depend on type of instance you pass to sendBeacon second parameter.

application/x-www-form-urlencoded
To send application/x-www-form-urlencoded, use UrlSearchParams instance.

// 1. Query String
const params = new URLSearchParams({
   key : 'id',
   values : '123',
});
navigator.sendBeacon(url, params);

multipart/form-data
To send multipart/form-data header, use FormData instance.

// 2. FormData String
const params = new FormData();
params.append('key', 'id');
params.append('value', '123');
navigator.sendBeacon(url, params);

application/json
To send application/json header, use Blob and set its type.

// 3. JSON Object
const data = {
   key : 'id',
   values : '123',
};

const params = new Blob(
    [JSON.stringify(data)], 
    {type : 'application/json'}
);

navigator.sendBeacon(url, params);

refs

https://www.cnblogs.com/xgqfrms/p/14634832.html

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---