Fetch vs. AjaxCall

Question

Jaka jest różnica między typowym interfejsem API AJAX i Fetch?

Rozważmy następujący scenariusz:

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 

To co powraca fetch połączeń:

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

Dlaczego to zwracają różne rzeczy?

Czy istnieje sposób, aby fetch przywrócić to samo, co typowe połączenie AJAX?

Answer 1

API Fetch został zbudowany w metodach dla różnych typów danych.
Dla zwykłego tekstu/html używałbyś metody text(), która również zwraca obietnicę i łączy ją z innym, a następnie wywołuje.

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

Wbudowany ins dla wracającej treści jest następujący

• clone() - Tworzy klon obiektu Response.
• error() - Zwraca nowy obiekt odpowiedzi związany z błędem sieci.
• Przekierowanie() - Tworzy nową odpowiedź z innym adresem URL.
• arrayBuffer() - Zwraca obietnicę rozwiązaną za pomocą ArrayBuffer.
• blob() - Zwraca obietnicę, która rozwiązuje się z Blobem.
• formData() - Zwraca obietnicę rozwiązaną za pomocą obiektu FormData.
• json() - Zwraca obietnicę rozwiązaną za pomocą obiektu JSON.
• tekst() - Zwraca obietnicę rozwiązującą USVString (tekst).

Pozwala także wysłać rzeczy do serwera lub dodać własne nagłówki itp

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

Twoja ajaxCall zwraca obiekt responseText z obiektu XMLHttpRequest. To filtruje.

Należy odczytać tekst odpowiedzi w kodzie pobierania.

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

Można również użyć x.json() lub