In an Electron Application I am successfully making an HTTP GET request from an Angular component. H-CodePudding

The following function is working from an Angular component in my Electron app:

getData() {


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

The alert prints out the same text as you will see if you browse to https://reqres.in/api/users?page=1

i.e.:

{"page":1,"per_page":6,"total":12,"total_pages":2,"data":[{"id":1,"email":"[email protected]","first_name":"George","last_name":"Bluth","avatar":"https://reqres.in/img/faces/1-image.jpg"},{"id":2,"email":"[email protected]","first_name":"Janet","last_name":"Weaver","avatar":"https://reqres.in/img/faces/2-image.jpg"},{"id":3,"email":"[email protected]","first_name":"Emma","last_name":"Wong","avatar":"https://reqres.in/img/faces/3-image.jpg"},{"id":4,"email":"[email protected]","first_name":"Eve","last_name":"Holt","avatar":"https://reqres.in/img/faces/4-image.jpg"},{"id":5,"email":"[email protected]","first_name":"Charles","last_name":"Morris","avatar":"https://reqres.in/img/faces/5-image.jpg"},{"id":6,"email":"[email protected]","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!"}}

Now, I've tried several methods to get this to work from the Electron main app side.

Here is my current incarnation (it's in the app.on function of my main.ts):

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()

It all runs without error and I have response.statusCode = 200.

But where in the response can I find the JSON data returned from https://reqres.in/api/users?page=1 ?

I thought it might be in the 'chunk' variable, well if I stringify it I have:

'{"type":"Buffer","data":[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,34,58,49,44,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]}'

Is this it in binary form? If so how would I convert it?

Or should I be looking at an entirely different approach from using net.request?

Or indeed, can I use HttpClient from the electron apps main.ts just as I do in the Angular component?

I ask becasue in the Angular component I introduce it via the constructor like so:

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

but there is no constructor in the main.ts of the Electron app.

Thanks very much for any help.

CodePudding user response：

In your code

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

chunk is a Buffer of part of the response body data. In order to get the full response body as JSON, you would need to concatenate all buffers and then parse it as JSON. i.e.

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}`);
})