Fetch vs. AjaxCall

Question

Qual è la differenza tra le API AJAX e Fetch tipiche?

consideri questo scenario:

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 

questo è ciò che i fetch chiamata restituisce:

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

Perché deve restituire le cose diverse?

C'è un modo per fetch restituire la stessa cosa di una tipica chiamata AJAX?

Answer 1

L'API Fetch ha costruito in metodi per i diversi tipi di dati.
Per il normale testo/html si usa il metodo text(), che restituisce anche una promessa e lo concatena con un altro quindi chiama.

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

Le built-in per il contenuto restituito è il seguente

• clone() - Crea un clone di un oggetto Response.
• errore() - Restituisce un nuovo oggetto risposta associato a un errore di rete.
• redirect() - Crea una nuova risposta con un URL diverso.
• arrayBuffer() - Restituisce una promessa che si risolve con un ArrayBuffer.
• blob() - Restituisce una promessa che si risolve con un Blob.
• formData() - Restituisce una promessa che si risolve con un oggetto FormData.
• json() - Restituisce una promessa che si risolve con un oggetto JSON.
• text() - Restituisce una promessa che si risolve con un USVString (testo).

Consente inoltre di inviare le cose al server, o aggiungere i propri intestazioni ecc

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

Your ajaxCall sta restituendo il responseText dall'oggetto XMLHttpRequest. Sta filtrando.

È necessario leggere la risposta Testo nel codice di recupero.

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

È anche possibile utilizzare x.json() o