javascript - ejemplos - Fetch vs AjaxCall

fetch vs ajax jquery

Question

¿Cuál es la diferencia entre AJAX típico y Fetch API?

Considere este escenario:

function ajaxCall(url) {
  return new Promise(function(resolve, reject) {
    var req = new XMLHttpRequest();
    req.open(''GET'', url);

    req.onload = function() {
      if (req.status == 200) {
        resolve(req.response);
      } else {
        reject(Error(req.statusText));
      }
    };
    req.onerror = function() {
      reject(Error("Network Error"));
    };
    req.send();
  });
}

ajaxCall(''www.testSite'').then(x => {
  console.log(x)
}) // returns html of site

fetch(''www.testSite'').then(x => {
  console.log(x)
}) // returns object with information about call

Esto es lo que devuelve la llamada fetch :

Response {type: "cors", url: "www.testSite", status: 200, ok: true, statusText: "OK"…}

¿Por qué devuelve cosas diferentes?

¿Hay una manera de fetch para fetch lo mismo que una llamada AJAX típica?

Answer 1

La API Fetch ha incorporado métodos para diferentes tipos de datos.
Para solo texto / html regular, usaría el método text() , que también devuelve una promesa, y lo encadena con otra llamada.

fetch(''www.testSite'').then( x => { 
    return x.text();
}).then( y => {
    console.log(y);
});

Las incorporaciones para el contenido devuelto son las siguientes

• clone (): crea un clon de un objeto de respuesta.
• error (): devuelve un nuevo objeto de respuesta asociado con un error de red.
• redirect (): crea una nueva respuesta con una URL diferente.
• arrayBuffer (): devuelve una promesa que se resuelve con un ArrayBuffer.
• blob (): devuelve una promesa que se resuelve con un blob.
• formData (): devuelve una promesa que se resuelve con un objeto FormData.
• json (): devuelve una promesa que se resuelve con un objeto JSON.
• text (): devuelve una promesa que se resuelve con un USVString (texto).

También le permite enviar cosas al servidor o agregar sus propios encabezados, etc.

fetch(''www.testSite'', {
    method  : ''post'',
    headers : new Headers({
        ''Content-Type'': ''application/x-www-form-urlencoded''
    }),
    body    : new FormData(document.getElementById(''myform''))
}).then( response => {
    return response.json(); // server returned valid JSON
}).then( parsed_result => {
    console.log(parsed_result);
});

Answer 2

Su ajaxCall devuelve el responseText del objeto XMLHttpRequest. Lo está filtrando.

Debe leer el texto de respuesta en el código de recuperación.

fetch(''www.testSite'').then( x => { console.log(x.text()); } )

También puedes usar x.json() o x.blob()