Conceitos básicos de Fetch

A Fetch API fornece uma interface para buscar recursos (inclusive pela rede). Parecerá familiar para alguém que já tenha usado XMLHttpRequest, mas ela fornece um conjunto de recursos mais poderoso e flexível . Este artigo expõe alguns conceitos básicos da API Fetch.

Nota: Este artigo será incrementado ao longo do tempo. Se você achar um conceito em Fetch que parece precisar de uma explicação melhor, informe alguém em fórum de discussãMDN, or Mozilla IRC (#mdn room.)

Em poucas palavras

O coração do Fetch são as abstrações da Interface do HTTP Request, Response, Headers (en-US), e Body payloads, juntamente com global fetch (en-US) método para iniciar requisições de recursos assíncronos. Como os componentes principais do HTTP são abstraidos como objetos de JavaScript, torna-se fácil APIs fazer uso das funcionalidades.

Service Workers (en-US) é um exemplo de uma API que faz um grande uso de Fecth.

Fetch leva a assincronicidade um passo além. A API é completamente baseada em Promise.

Guard

Guard é uma novidade de objetos Headers (en-US), podendo assumir os valores de immutable, request, request-no-cors, response, ou none, dependendo de onde o cabeçalho é utilizado.

Quando um novo objeto Headers (en-US) é criado usando o Headers() (en-US) constructor (en-US), seu guard é configurado como none (o padrão). Quando um objeto Request ou Response é criado, tem um objeto Headers (en-US) associado cujo guard é resumido a seguir:

Novo tipo de objeto Construtor criado Configuração guard associada ao objeto Headers (en-US)
Request Request() request
Request() com mode (en-US) de no-cors request-no-cors
Response Response() (en-US) response
Métodos error() (en-US) ou redirect() (en-US) immutable

Um cabeçalho guard afeta os métodos set() (en-US), delete() (en-US), e append() (en-US) os quais mudam o conteúdo do cabeçalho. UmTypeError é lançado se você tentar modificar um objeto Headers (en-US) objeto cujo "guard" é immutable. De qualquer maneira, a operação vai funcionar se