Sending a request using fetch in Javascript for a partial/ajax request

Question

What I am trying to do is to get a request from a server using fetch in Javascript. The problem is that the answer is coming like a partial-response with xml, so the answer don't come at once, but fetch only give me the first part.

I already tried things like asynchronous things (like await, or then), but I always have only the first part of the answer.

Here is my code :

let response = await fetch(url, {
        method: 'POST',
        body: // my body
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
            'Connection': 'close',
            'Faces-Request': 'partial/ajax',
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/xml, text/xml, */*; q=0.01',
            'Accept': '*/*',
            'Accept-Encoding': 'gzip, deflate',
            // then cookie, user-agent ...
        }});

I also tried using XMLHttpRequest, but I need to use a Cookie header, that I can't use with it.

For the answer, I am expecting something like this (I replaced the personal informations with _) :

<?xml version='1.0' encoding='UTF-8'?>
<partial-response id="j_id1">
    <changes>
        <update id="form:messages">
            <![CDATA[_]]></update>
        <update id="form:j_idt117">
            <![CDATA[_]]></update>
        <update id="form:j_idt133">
            <![CDATA[_]]></update>
        <update id="form:j_idt228">
            <![CDATA[_]]></update>
        <update id="j_id1:javax.faces.ViewState:0"><![CDATA[_]]></update>
    </changes>
</partial-response>

But I get :

<?xml version='1.0' encoding='UTF-8'?>
<partial-response id="j_id1">
    <changes>
        <update id="form:j_idt228">
            <![CDATA[_]]></update>
        <update id="j_id1:javax.faces.ViewState:0"><![CDATA[_]]></update>
    </changes>
</partial-response>

So the question is, does fetch have something to help me with it ? I thought first of a wait before beginning to hear for the answer, but I find no documentation on that kind of thing.

Thank you in advance for your help !

Answer 1

Can you try this code - node-fetch:

const fetch = require('node-fetch');

async function fetchChunked(url, options) {
  const response = await fetch(url, options);
  if (!response.ok) {
    throw new Error(`Failed to fetch ${url}: ${response.status} ${response.statusText}`);
  }

  const chunks = [];
  let length = 0;
  for await (const chunk of response.body) {
    chunks.push(chunk);
    length += chunk.length;
  }

  const buffer = Buffer.concat(chunks, length);
  const data = buffer.toString('utf-8');
  return data;
}

const url = 'https://example.com';
const options = {
  method: 'POST',
  body: // my body
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
    'Connection': 'close',
    'Faces-Request': 'partial/ajax',
    'X-Requested-With': 'XMLHttpRequest',
    'Accept': 'application/xml, text/xml, */*; q=0.01',
    'Accept': '*/*',
    'Accept-Encoding': 'gzip, deflate',
    // then cookie, user-agent ...
  },
};

const data = await fetchChunked(url, options);
console.log(data);