天天看点

ElectronJS开发系列:net模块请求

ElectronJS桌面开发过程中,我们少不了要和云端服务器进行接口交互,写习惯了web的同学,可能习惯性的用axios或者XHR向后端发起请求,但是我们会遇到跨域的问题,我们可能会按照平时的开发习惯去webpack中配置proxy,但是会发现,打包成安装包后,跨域问题又出现了,根本原因是ElectronJS打包后,这时请求的页面变成了file://协议,并且proxy只对开发生效,所以跨域还存在,这个时间解决方案有三个:

1、找运维或者后端设置允许跨域请求

2、electronjs官方提供解决方案,使用net模块发送请求

3、使用nodejs的http, https发起请求

官方推荐使用方式二,因为方法二可以兼容系统代理配置,满足抓包等调试需求。本文主要介绍net模块发起请求。

创建一个请求:

const clientRequest = net.request({
  url: 'https://www.baidu.com/user/login',
  method: 'post'
})           

配置项目说明:

options (Object | string) - 如果 options 是字符串,则为请求的 URL。 如果是对象,它应该通过以下属性完全指定HTTP请求:

method string (可选) - HTTP 请求方法。 默认为GET方法。

url string (可选) - 请求URL。 必须以绝对路径形式提供,并将协议指定为http或https。

session Object (可选) - 与请求相关联的Session实例.

partition string (可选) - 与请求相关联的partition名称. 默认为空字符串. session 选项取代了 partition。 因此, 如果session是显式指定的, 则partition将被忽略.

credentials string (可选) - 可以是 include 或 omit。 是否随此请求发送 凭据。 如果设置为 include,将使用与请求相关的会话凭据。 如果设置为 omit,则不会随请求发送凭据(并且不会在 401响应的事件中触发 'login' 事件)。 这与同名的 fetch 选项的行为相同。 如果未指定此选项,则会发送来自会话的身份验证数据,同时不发送cookie(除非 设置了useSessionCookies)。

useSessionCookies boolean (可选) - 是否从提供的会话与请求一起发送cookie。 如果指定了 credentials ,则此选项没有效果。 默认值为 false.

protocol string (可选) - 可以是 http: 或 https:。 协议方案的形式为“scheme:”。 默认为 'http:'。

host string (可选) - 作为连接提供的服务器主机,主机名和端口号'hostname:port'.

hostname string (可选) - 服务器主机名.

port Integer (可选) - 服务器侦听的端口号.

path string (可选) - 请求URL的路径部分.

redirect string (可选) - 可以是 follow, error 或 manual。 当前请求的重定向模式。 当模式为 error 时,任何重定向都会被中止。 当模式为 manual 时,重定向会被取消,除非 request.followRedirect 在redirect 事件期间同步调用。 默认值为 follow.

origin string (可选) - 请求的源 URL。

设置请求头:

clientRequest.setHeader('Content-Type', 'application/json')           

注册response响应事件:

clientRequest.on('response', (response) => {
      // 响应异常
      response.on('error', (err) => {
        console.log(err)
      })
      // 保存所有接收到的Buffer数据
      let allChunk = []
      let size = 0
      // 注册接收完毕事件
      response.on('end', () => {
        try {
          let buf = Buffer.concat(allChunk, size)
          console.log(buf.toString())
        } catch (e) {
          console.log(e)
          reject(e)
        }
      })
      // 注册分段数据接收事件
      response.on('data', data => {
        // @ts-ignore
        allChunk.push(data)
        size += data.length
      })
    })           

ClientRequest和Response支持的所有事件可以参考官方文档。

类: ClientRequest | Electron (electronjs.org)

类:IncomingMessage | Electron (electronjs.org)

发送请求数据:

clientRequest.write(JSON.stringify(data))
clientRequest.end()           

这样就可以实现使用net模块请求后端接口啦。

注意net模块只能在主进程中使用,不能在渲染进程中使用,所以需要通过ipc通讯机制,让渲染进程调用主进程中的方法请求,并返回数据。下一节将介绍主进程和渲染进程之间的通讯。

ElectronJS开发系列:net模块请求

继续阅读