Buscar API vs XMLHttpRequest

Eu sei que a API Fetch usa se Promiseambos permitem que você faça solicitações AJAX para um servidor.

Li que a API Fetch tem alguns recursos extras, que não estão disponíveis no XMLHttpRequest(e no polyfill da API Fetch, pois é baseado nele XHR).

Quais recursos extras a API Fetch possui?

Existem algumas coisas que você pode fazer com a busca e não com o XHR:

• Você pode usar a API de cache com os objetos de solicitação e resposta;
• Você pode executar no-corssolicitações, obtendo uma resposta de um servidor que não implementa o CORS. Você não pode acessar o corpo da resposta diretamente do JavaScript, mas pode usá-lo com outras APIs (por exemplo, a API de cache);
• Respostas de streaming (com XHR, toda a resposta é armazenada em buffer na memória, com a busca, você poderá acessar o fluxo de baixo nível). Isso ainda não está disponível em todos os navegadores, mas estará disponível em breve.

Há algumas coisas que você pode fazer com o XHR que ainda não pode ser buscado, mas elas estarão disponíveis mais cedo ou mais tarde (leia o parágrafo "Futuras melhorias" aqui: https: //hacks.mozilla .org / 2015/03 / esta-api-é-tão-atraente / ):

• Interrompa uma solicitação (agora funciona no Firefox e Edge, como @sideshowbarker explica em seu comentário);
• Relatar progresso.

Este artigo https://jakearchibald.com/2015/thats-so-fetch/ contém uma descrição mais detalhada.

buscar

• faltando um método interno para consumir documentos
• nenhuma maneira de definir um tempo limite ainda
• não pode substituir o cabeçalho de resposta do tipo de conteúdo
• se o cabeçalho de resposta do tamanho do conteúdo estiver presente, mas não exposto , o comprimento total do corpo será desconhecido durante a transmissão
• chamará o manipulador de interrupção do sinal, mesmo que a solicitação tenha sido concluída
• nenhum progresso no upload (o suporte a ReadableStreaminstâncias como corpos de solicitação ainda está por vir )

XHR

• não há como não enviar cookies (além de usar o sinalizador não padrãomozAnon ou o AnonXMLHttpRequestconstrutor)
• não pode retornar FormDatainstâncias
• não tem um equivalente ao fetch's no-corsmodo de
• siga sempre os redirecionamentos

As respostas acima são boas e fornecem boas informações, mas eu compartilho a mesma opinião que compartilhada nesta entrada de blog de desenvolvedores do Google em que a principal diferença (de uma perspectiva prática) é a conveniência da promessa interna retornada defetch

Em vez de ter que escrever um código como este

function reqListener() {
    var data = JSON.parse(this.responseText);
}

function reqError(err) { ... }

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();

podemos limpar as coisas e escrever algo um pouco mais conciso e legível com promessas e sintaxe moderna

fetch('./api/some.json')
    .then((response) => {
        response.json().then((data) => { 
            ... 
        });
    })
    .catch((err) => { ... });