Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Headers do Fetch API não funciona

Olá pessoal, todos bem? Estou iniciando meus estudos sobre programação e para isso escolhi iniciar pelo JS. Um dos meus métodos preferidos de aprender é já ir fazendo coisas que terão uso real. Neste momento estou tentando criar uma função que consuma dados de uma API, mas estou com dificuldades no headers. A documentação da API pede o seguinte: HEADERS Content-Type: application/json x-access-token: token_cliente

Já com o token em mãos estou tentando me comunicar com o ambiente de homologação da API utilizando o código abaixo, mas o console está retornando o seguinte erro:

Uncaught SyntaxError: Unexpected token ':' index.html:12

O que está errado pessoal? Agradeço de coração a todos que puderem ajudar! Muito obrigado!!

Obs. Como se trata de um token real, postei somente um pequeno fragmento do mesmo.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
      function consultaExtrato() {
        fetch("http://hml.sinter.irtdpjsp.com.br/api/extrato")
          method: "GET",
          Content-Type: "application/json"
          headers:{
              "x-access-token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUz"
          }
        .then(response => {
          if(response.ok) {
            return response.json();
          }
        })  
      };
      .then(data => {
        console.log(data);
      })
      .catch(err => {
        console.log(err.message);
      });

      consultaExtrato();
    </script>
</body>
</html>
2 respostas

Olá Douglas, tudo bem com você?

A questão é que neste caso não está sendo passado o headers, veja que você fechou a função:

fetch("http://hml.sinter.irtdpjsp.com.br/api/extrato")

Quando estamos utilizando a fetch api temos o seguinte formato:

fetch( url, options)

Onde options é esse objeto que você passou ( com method, headers), então no caso teríamos que fazer da seguinte maneira:

fetch("http://hml.sinter.irtdpjsp.com.br/api/extrato", {
    method: "GET",
    headers: {
        "Content-Type": "application/json",
        "x-acess-token":  "token_de_acesso"
    }
})
.then(....)
.catch(....)

Veja também que o content-type faz parte dos nosso headers :)

Por isso estava dando esse problema:

Uncaught SyntaxError: Unexpected token ':' index.html:12

Pois como não passamos um objeto após a url, não é possível utilizar os :

Conseguiu Compreender?

Abraços e Bons Estudos :)

solução!

Oi Giovane, tudo bom? Entendi perfeitamente!! Já apliquei a correção e funcionou certinho. Deu outro erro, mas vou postar em novo tópico para deixar o fórum bem organizado.

Te agradeço imensamente pelas explicações que me ajudaram a evoluir nos estudos! Grande abraço!!