Loading

electron网络请求

  1. --package.json
  2. {
  3.   "name": "electrondemo",
  4.   "version": "1.0.0",
  5.   "description": "hello electron",
  6.   "main": "main.js",
  7.   "scripts": {
  8.     "test": "echo \"Error: no test specified\" && exit 1"
  9.   },
  10.   "author": "zwm",
  11.   "license": "ISC",
  12.   "devDependencies": {
  13.     "electron": "^11.0.3"
  14.   }
  15. }
  16.  
  17. --main.js
  18. var electron = require('electron')
  19.  
  20. var app = electron.app
  21. var BrowserWindow = electron.BrowserWindow
  22.  
  23. var mainWindow = null
  24.  
  25. app.on('ready', () => {
  26.     mainWindow = new BrowserWindow({
  27.         width: 800,
  28.         height: 600,
  29.         webPreferences: {
  30.             /*
  31.             在窗口中集成node,不然renderer页面中会报require is not defined的错误,参考:
  32.             解决 Electron 5.0 版本出现 require is not defined 的问题   https://www.cnblogs.com/kuku19940613/p/10814905.html
  33.             */
  34.             nodeIntegration: true,
  35.  
  36.             /*
  37.             开启remote模块,在electron 10.0.0之后,remote模块默认关闭,不然会出
  38.             现【Cannot destructure property 'net' of 'require(...).remote' as it is undefined.】的错
  39.             误,参考:
  40.             Electron JS - Cannot destructure property 'BrowserWindow' of 'require(…).remote' as it is undefined    https://stackoverflow.com/questions/63901266/electron-js-cannot-destructure-property-browserwindow-of-require-remot
  41.             升级到electron10以后的版本remote失效    https://blog.csdn.net/xx344879362/article/details/108639447
  42.             */
  43.             enableRemoteModule: true,
  44.         }
  45.     })
  46.     mainWindow.loadFile('index.html')
  47.     mainWindow.webContents.openDevTools() // 显示调试窗口
  48.     mainWindow.on('closed', () => {
  49.         mainWindow = null
  50.     })
  51. })
  52.  
  53. --index.html
  54. <!DOCTYPE html>
  55. <html lang="en">
  56. <head>
  57.     <meta charset="UTF-8">
  58.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  59.     <title>网络请求Demo</title>
  60. </head>
  61. <body>
  62.     <button>点我进行网络请求</button>
  63.     <script>
  64.         var btn = document.querySelector("button");
  65.         btn.onclick = function() {
  66.             console.log("onclick...");
  67.  
  68.             const {net} = require('electron').remote; // 加载网络请求模块
  69.             const request = net.request('https://test.weshare.team/api');
  70.             request.on('response', (response) => {
  71.                 console.log(`**statusCode:${response.statusCode}`);
  72.                 console.log(`**header:${JSON.stringify(response.headers)}`);
  73.  
  74.                 response.on("data", (chunk) => {
  75.                     console.log("接收到数据:", chunk.toString());
  76.                 })
  77.  
  78.                 response.on('end', () => {
  79.                     console.log("数据接收完成");
  80.                 })
  81.             });
  82.            
  83.             // 结束请求,不然没有响应数据
  84.             request.end();
  85.         }
  86.     </script>
  87. </body>
  88. </html>

Comments

粤ICP备13044925号-6