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

SyntaxError: Unexpected token 'c', "content=Ol"... is not valid JSON

Olá,

Fiz conforme a aula, no entanto deu o mesmo erro de outro colega: SyntaxError: Unexpected token 'c', "content=Ol"... is not valid JSON

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Tentei, então a orientação no mesmo tópico do colega onde é sugerido desta forma:

void register(String content) {
    http.post(
      Uri.parse(getUrl()),
      headers: {'Content-Type': 'application/json'},
      body: json.encode({'content': content}),
    );
  }

Neste caso não deu erro no terminal, porém o arquivo db.json não é populado, não altera nada nele

Tem o outro tópico que é o [Sugestão] Resolvendo problemas do primeiro teste de requisição à API , ficando o código desta forma:

register(String content) {
    http.post(Uri.parse(getUrl()), body: json.encode({'content': content}));
  }

Aqui funcionou, mas tive que alterar o arquivo db.json conforme o colega postou no tópico, ficando o resultado assim:

{
  "learnhttp": [
    {
      "id": "5e6e",
      "content": "Olá mundo!"
    }
  ]
}

Registrou, mas há uma observação neste mesmo tópico, logo mais abaixo que entendi que não há essa necessidade pois, conforme o Renan relata ali: "No entanto, no exemplo da aula, a requisição foi feita sem a necessidade de codificação em JSON, pois o pacote HTTP já faz isso automaticamente quando passamos um Map para o body da requisição"

Fiquei na dúvida de qual devo usar para dar continuidade no curso?

3 respostas

Olá, Alvaro.

Tudo bem?

Sobre a sugestão, o pacote HTTP pode lidar com a codificação do mapa para JSON automaticamente, mas apenas quando o cabeçalho Content-Type é definido como application/json. Sem esse cabeçalho, o corpo da requisição pode ser interpretado de forma diferente pelo servidor.

Aqui está uma sugestão de como você pode proceder para garantir que a requisição seja enviada corretamente, e você seguir com o curso:

void register(String content) async {
  var response = await http.post(
    Uri.parse(getUrl()),
    headers: {'Content-Type': 'application/json'},
    body: json.encode({'content': content}),
  );
  if (response.statusCode == 200) {
    print('Registro bem-sucedido: ${response.body}');
  } else {
    print('Falha no registro: ${response.statusCode}');
  }
}

Com esse código, você está enviando uma requisição POST com o cabeçalho Content-Type definido como application/json e o corpo codificado como JSON. Além disso, você verifica o código de status da resposta para determinar se a requisição foi bem-sucedida.

Se preferir, você pode tentar seguir o curso com a segunda solução que você mencionou, sobre [Sugestão] Resolvendo problemas do primeiro teste de requisição à API.

Espero ter ajudado. Qualquer dúvida manda aqui. Bons estudos.

Oi Renan, tudo bem?

Eu havia tentado da forma como você passou, mas o que está ocorrendo é o seguinte, se eu fizer o db.json igual está nas aulas, assim:

{
  "learnhttp": {

  }
}

Usando a sua orientação, dá esse erro:

I/flutter (21973): ┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
I/flutter (21973): │ #0   LoggingInterceptor.interceptResponse (package:flutter_webapi_first_course/services/http_interceptors.dart:20:14)
I/flutter (21973): │ #1   InterceptedClient._interceptResponse (package:http_interceptor/http/intercepted_client.dart:282:53)
I/flutter (21973): ├┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄
I/flutter (21973): │ ⛔ Resposta de: http://192.168.3.8:3000/learnhttp/
I/flutter (21973): │ ⛔ Status da Resposta: 404
I/flutter (21973): │ ⛔ Cabeçalhos: {connection: keep-alive, x-powered-by: tinyhttp, access-control-allow-headers: content-type, keep-alive: timeout=5, access-control-allow-origin: *, date: Mon, 25 Mar 2024 14:55:53 GMT, access-control-allow-methods: GET, HEAD, PUT, PATCH, POST, DELETE, content-length: 9, etag: W/"9-0gXL1ngzMqISxa6S1zx3F4wtLyg", content-type: text/plain; charset=utf-8}
I/flutter (21973): │ ⛔ Corpo: Not Found
I/flutter (21973): └───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
I/flutter (21973): Falha no registro: 404

Já se usar a mesma abordagem mas alterando o db.json para:

{
  "learnhttp": [

  ]
}

Ele popula desta forma:

{
  "learnhttp": [
    {
      "id": "008c",
      "content": "Olá mundo!"
    }
  ]
}

Cada vez que eu rodo tem um novo registro com um novo id, diferente de como está nas aulas.

Se não tiver problema para continuidade, posso usar com [] ao invés de {}, apesar dele gerar um id para cada interação?

solução!

Olá, novamente.

Você pode tentar seguir dessa forma, se por acaso aparecer novos erros você manda aqui no fórum, em um novo tópico.

Ficaremos felizes em ajudar.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software