在 Electron 应用程序中，我成功地从 Angular 组件发出 HTTP GET 请求。我怎样才能从电子方面做同样的事情？

Question

以下功能在我的 Electron 应用程序中的 Angular 组件中运行：

getData() {


    const url = 'https://reqres.in/api/users?page=1';
    this.http.get<any>(url).toPromise()
    .then(response=> {
        //...
        alert(JSON.stringify(response));
    });
  }

如果您浏览到 https://reqres.in/api/users?page=1

，警报会打印出与您将看到的相同的文本

即：

{"page":1,"per_page":6,"total":12,"total_pages":2,"data":[{"id":1,"email":"george.bluth@reqres.in","first_name":"George","last_name":"Bluth","avatar":"https://reqres.in/img/faces/1-image.jpg"},{"id":2,"email":"janet.weaver@reqres.in","first_name":"Janet","last_name":"Weaver","avatar":"https://reqres.in/img/faces/2-image.jpg"},{"id":3,"email":"emma.wong@reqres.in","first_name":"Emma","last_name":"Wong","avatar":"https://reqres.in/img/faces/3-image.jpg"},{"id":4,"email":"eve.holt@reqres.in","first_name":"Eve","last_name":"Holt","avatar":"https://reqres.in/img/faces/4-image.jpg"},{"id":5,"email":"charles.morris@reqres.in","first_name":"Charles","last_name":"Morris","avatar":"https://reqres.in/img/faces/5-image.jpg"},{"id":6,"email":"tracey.ramos@reqres.in","first_name":"Tracey","last_name":"Ramos","avatar":"https://reqres.in/img/faces/6-image.jpg"}],"support":{"url":"https://reqres.in/#support-heading","text":"To keep ReqRes free, contributions towards server costs are appreciated!"}}

现在，我已经尝试了几种方法来让它在 Electron 主应用程序端运行。

这是我当前的化身（它在我的 main.ts 的 app.on 函数中）：

const { net } = require('electron')
  const request = net.request({
    method: 'GET',
    url: 'https://reqres.in/api/users?page=1'})
  request.on('response', (response) => {
    console.log(`STATUS: ${response.statusCode}`)
    console.log(`HEADERS: ${JSON.stringify(response.headers)}`)
    response.on('data', (chunk) => {
      console.log(`BODY: ${chunk}`)
    })
    response.on('end', () => {
      console.log('No more data in response.')
    })
  })
  request.end()

一切正常运行，我有 response.statusCode = 200。

但是我可以在响应中的哪个位置找到从 https://reqres.in/api/users?page=1 返回的 JSON 数据？

我认为它可能在 'chunk' 变量中，好吧，如果我将它字符串化，我有：

'{“类型”：“缓冲区”，“数据”：[123,34,112,97,103,101,34,58,49,44,34,112,101,114,95,112,97,103,101,34,58,54,44,34,116,111,116, 97,108,34,58,49,50,44,34,116,111,116,97,108,95,112,97,103,101,115,34,58,50,44,34,100,97,116,97,34,58,91,123,34,105,100,94,458,4, 34,101,109,97,105,108,34,58,34,103,101,111,114,103,101,46,98,108,117,116,104,64,114,101,113,114,101,115,46,105,110,34,44,34,102,105,114,115,116,95,110,97,109,101,34,58,34,71,101,111,114,103,101,34,44,34,108,97,115,116,95,110,97,109,101,34, 58,34,66,1…117,112,112,111,114,116,34,58,123,34,117,114,108,34,58,34,104,116,116,112,115,58,47,47,114,101,113,114,101,115,46,105,110,47,35,115,117,112,112,111,114,116,45,104,101,97,100,105,110,103,34,44,34,116,101,120,116,34,58,34, 84,111,32,107,101,101,112,32,82,101,113,82,101,115,32,102,114,101,101,44,32,99,111,110,116,114,105,98,117,116,105,111,110,115,32,116,111,119,97,114,100,115,32,115,101,114,118,101,114,32,99,111,115,116,115,32,97,114,101,32,97,112,112,114,101,99,105,97,116,101,100,33,34,125, 125]}'

这是二进制形式吗？如果可以，我该如何转换？

或者我应该寻找一种与使用 net.request 完全不同的方法吗？

或者实际上，我可以像在 Angular 组件中那样使用电子应用程序 main.ts 中的 HttpClient 吗？

我问是因为在 Angular 组件中我通过构造函数引入它，如下所示：

constructor(
              private http:HttpClient,) {
    super();

但是 Electron 应用程序的 main.ts 中没有构造函数。

非常感谢您的帮助。

Answer 1

在你的代码中

response.on('data', (chunk) => {
  console.log(`BODY: ${chunk}`)
})

chunk是部分响应体数据的Buffer。为了获得 JSON 形式的完整响应主体，您需要连接所有缓冲区，然后将其解析为 JSON。即

let buffers = [];

response.on('data', (chunk) => {
  console.log(`Buffer: ${chunk}`);
  buffers.push(chunk);
})

response.on('end', () => {
  let responseBodyBuffer = Buffer.concat(buffers);
  let responseBodyJSON = JSON.parse(responseBodyBuffer.toString());
  console.log(`BODY: ${responseBodyJSON}`);
})

在 Electron 应用程序中，我成功地从 Angular 组件发出 HTTP GET 请求。我怎样才能从电子方面做同样的事情？

In an Electron Application I am successfully making an HTTP GET request from an Angular component. How can I do the same thing from the Electron side?

http

electron

angular