Introdução

Eu fiz um post introdutório sobre Fetch aqui: Link do post introdutório onde eu citei diversas características do fetch. Eu também citei que algumas dessas características são tão extensas que teriam uma página dedicada somente para elas. Aqui está uma dessas características com mais detalhes, o objeto init que é o segundo argumento do fetch (opcional) e é extremamente útil para detalhar mais sobre a requisição feita com um fetch. Sem mais delongas:

Revisão da sintaxe

Uma breve revisão da sintaxe:

fetch(url, {
    method: 'GET',
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringfy(data)/
})

Aqui é uma estrutura base, que inclusive, tem um erro, que vai ser explicando a seguir.

Paramêtros aceitos no Objeto Init:

• method => responsável por indicar a ação que queremos. Podemos utilizar POST para enviar ou GET para buscar. Existem diversos métodos HTTP que são aceitos. Para mais consulte a documentação do MDN. Uma observação é que origin que é incluido no Headers para métodos como POST, PUT e outros (apenas para requests de mesma origem), não é incluso quando utilizado os seguintes métodos: GET, HEAD. Isto é porquê origin é seguro e tem como dever proteger os dados ou resguardar informações não necessárias, portanto, não é incluso para métodos GET e HEAD

---

• headers => headers carrega várias informações sobre o request como o tipo de arquivo enviado, dentre outras coisas. headers é objeto com valores em strings. headers tera uma página dedicada.

---

• body => pode carrega o tipo de dado que vai ser enviado. Pode ser um arquivo em json, blob, formData, DataView, typedArray, ArrayBuffe, dentre outros. Cuidado ao utilizar algums desses formatos de dados, pois alguns são experimentais e não são compatíveis com todos os navegadores. Outra observação é que body não deve ser incluído junto com o method com o valor de GET ou HEAD. Inclusive, este era o erro do exemplo da sintaxe :)

---

• mode => determina o modo que você quer usar o request, ou seja, cors, no-cors, or same-origin.

---

• credentials => determina se as credenciais devem ser ou não incluída. Possui os seguintes valores:
  -- include: Diz para incluir as credenciais junto com o request (cookies, http authentication, certificado SSL)
  -- same-origin: faz a mesma coisa que acima, porém somente se o request for de mesma origem.
  -- omit: não vai enviar as credenciais

---

• cache => indica como o navegador deve lidar com o cache, possuindo os seguintes valores: default, no-store, reload, no-cache, force-cache, and only-if-cached

---

• redirect => lida com comportamentos de rederecionamentos e possui os seguintes valores: fallow que automaticamente é rederecionado para um determinado local, error retorna um erro caso ocorra um redericionamento e manual que é chamado em resposta a outro contexto.
  Este é bem confuso (eu mesmo não entendi muito bem, se alguém puder explicar, por favor...)

---

• reference => indica a referência do request, podendo enviar a URL que requisitou ou enviou, ou ser vazia.

---

• referrerPolicy - indica qual tipo de política será usada para buscar e levar dados tendo os seguintes valores: no-referrer, no-referrer-when-downgrade, same-origin,origin, strict-origin, origin-when-cross-origin, strict-origin-when-cross-origin, or unsafe-url.

---

• integrity => esté é confuso, mas basicamente ele leva uma subresource que é vai garantir a integridade dos dados enviados ou trazidos. O navegador vai verificar se houve manipulação no meio do caminho. Os dados são criptografado em HASH

---

• signal => leva um objeto new AbortSignal para o fetch saber quando abortar se desejado. Lembrando que o valor de signal não é o construtor new AbortSignal e sim seus métodos. Que por sinal, são disparados por ações externas (fora do fetch);

---

• priority => indica qual é a prioridade da requisição em relação a outras requisições que estão acontecendo ao mesmo tempo. Os seguintes valores estão disponíveis: hight, low e auto

Possíveis TypeErros que podem ocorrer devido a requisições com os paramêtros acima:

Existem algumas erros comuns que são cometidos ao usar os paramêtros citados acima e o fetch em si, vou mostrar alguns deles:

Nome inválido no hedears:

// espaço em "C ontent-Type"
const headers = {
  'C ontent-Type': 'text/xml',
  'Breaking-Bad': '<3',
};
fetch('https://example.com/', { headers });

Valor inválido no Header. O objeto header deve conter exatamente pares de valores.

const headers = [
  ['Content-Type', 'text/html', 'extra'],
  ['Accept'],
];
fetch('https://example.com/', { headers });
    

Usando um esquema não valálido ou não suportado vai resultar em um TypeError

fetch('blob://example.com/', { mode: 'cors' });

Se o fetch incluir informações pessoais

fetch('https://user:[email protected]/');

reference inválida

fetch('https://example.com/', { referrer: './abc\u0000df' })

mode inválido

fetch('https://example.com/', { mode: 'navigate' });

Se o request modo é "only-if-cached" e o request modo é diferente de "same-origin". Basicamente os paramêtros entram em conflito.

fetch('https://example.com/', {
  cache: 'only-if-cached',
  mode: 'no-cors',

Se o method é inválido:

fetch('https://example.com/', { method: 'CONNECT' });

Se o mode é no-cors e o method é diferente de: 'GET', 'HEAD', or 'POST'

fetch('https://example.com/', {
  method: 'CONNECT',
  mode: 'no-cors',
});

Se o method é GET ou HEAD e contém o paramêtro body

fetch('https://example.com/', {
  method: 'GET',
  body: new FormData(),
});
        

E por último, qualquer problema relacionado a internet vai disparar um erro.

Conclusão

Eai? Gostaram? Cometi algum erro? Cometem!