CODEWITHSUNDEEP
javascriptecmascript-6fetch-api
s-leg3ndz
s-leg3ndz

Reputation: 3518

fetch API don't return same return of XMLHttpRequest

I would like convert XMLHttpRequest function to fetch API. But the result is different.

There are some things I have to do wrong, but i don't know what :/

My promise with XMLHttpRequest :

  return new Promise(function (resolve, reject) {

    let formData = new FormData($searchForm);

    if (searchTerm.length) {
      formData.append("search", searchTerm);
    }

    let request = new XMLHttpRequest();

    request.onreadystatechange = function () {
      if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
        console.log(request);
        resolve(request.responseText);
      }
    };

    request.open($searchForm.method, $searchForm.action, true);
    request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    request.send(formData);

  });

return (what i want) :

XMLHttpRequest { onreadystatechange: reload/http://localhost:3000/app_dev.php/r…", status: 200, statusText: "OK", responseType: "", response: "{"countMessage":"No product find" }

And my function with fetch API :

function searchReload() {

  const formData = new FormData($searchForm);
  const url = $searchForm.action;
  const method = $searchForm.method;

  if (searchTerm.length) {
    formData.append('search', searchTerm);
  }

  const header = new Headers();
  header.append('X-Requested-With', 'XMLHttpRequest');

  return fetch(url, {
    method: method,
    header,
    body: formData
  }).then(function (response) {
    return response;
  });

}

searchReload()
  .then(response => {
    return console.log(response);
  });

This function return :

Response { type: "basic", url: "http://localhost:3000/app_dev.php/r…", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers, bodyUsed: false }

Anyone can help me ? I don't know what is the problem, and why i can't have response: "{"countMessage":"No product find" } to my response :(

Thank you community !

Upvotes: 1

Views: 2538

Answers (1)

Jamiec
Jamiec

Reputation: 136084

You need to call response.json() to read the body:

return fetch(url, {
  method: method,
  header,
  body: formData
}).then(function (response) {
  // perhaps check the status before doing this!
  return response.json();
});

Example below of what happens to bodyUsed when you read the body

fetch('https://jsonplaceholder.typicode.com/posts/1').then(function(response) {
    console.log(response.bodyUsed);
    var res = response.json();
    console.log(response.bodyUsed);
    return res;
}).then(function(json) {
    console.log(json)
});

Upvotes: 2

Related Questions