Fetch vs. AjaxCall

Question

В чем разница между типичными API AJAX и Fetch?

Рассмотрим такой сценарий:

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 

Это то, что возвращает fetch вызов:

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

Почему возвращающие разные вещи?

Есть ли способ для fetch вернуть то же самое, что и обычный вызов AJAX?

Answer 1

Выборка API имеет встроенные методы для различных типов данных.
Для обычного текста/html вы должны использовать метод text(), который также возвращает обещание, а также его цепочку с другим вызовом.

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

Встроенные модули для возвращаемого контента заключается в следующем

• клон() - Создает клон объекта Response.
• error() - возвращает объект ответа, связанный с сетевой ошибкой, .
• redirect() - Создает новый ответ с другим URL-адресом.
• arrayBuffer() - возвращает обещание, которое разрешается с помощью ArrayBuffer.
• blob() - Возвращает обещание, которое разрешается с помощью Blob.
• formData() - возвращает обещание, которое разрешается с помощью объекта FormData.
• json() - возвращает обещание, которое разрешается с помощью объекта JSON.
• текст() - возвращает обещание, которое разрешается с помощью USVString (текст).

Это также позволяет передавать вещи на сервер, или добавить свои собственные заголовки и т.д.

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

Ваш ajaxCall возвращает ответText из объекта XMLHttpRequest. Он отфильтровывает его.

Вам необходимо прочитать текст ответа в коде выборки.

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

Вы также можете использовать x.json() или