Entrar Ainda não tem acesso?
2
respostas

[Dúvida] is not valid JSON - Erro ao executar POST no Json Server Flutter

Referente ao curso Flutter com WebAPI: integrando sua aplicação

por Jonathas de Azevedo Corrêa Assumpção
| 20.6k xp | 7 posts
Gerente de Infraestrutura de TI

Pessoal, boa tarde.

Procurei algum post parecido porém não encontrei. Estou no início do curso Web API e no primeiro POST no db.json estou dento dificuldade. No prompt de comando aparece a mensagem "is not valid JSON" e não registra o 'Olá mundo' que a aula apresenta.

Abaixo meu código e o pubspec.

journal_services.dart

import 'package:http/http.dart' as http;

class JournalServices {
  static const String url = 'http://192.168.15.59:3000/';
  static const String resource = 'learnhttp/';

  String getURL() {
    return '$url$resource';
  }

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

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_webapi_first_course/services/journal_services.dart';
import 'package:google_fonts/google_fonts.dart';
import 'screens/home_screen/home_screen.dart';

void main() {
  runApp(const MyApp());

  JournalServices service = JournalServices();
  service.register('Olá Mundo');

}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Journal',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
          primarySwatch: Colors.grey,
          appBarTheme: const AppBarTheme(
              elevation: 0,
              backgroundColor: Colors.black,
              titleTextStyle: TextStyle(
                color: Colors.white,
              )),
              textTheme: GoogleFonts.bitterTextTheme()
              ),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.light,
      initialRoute: "home",
      routes: {
        "home": (context) => const HomeScreen(),
      },
    );
  }
}

Print do terminal: Insira aqui a descrição dessa imagem para ajudar na acessibilidade
2 respostas
por Renan Lima
| 3681k xp | 7792 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Jonathas!

Pelo erro apresentado no terminal e pelo código que você compartilhou, parece que o problema está no formato dos dados que estão sendo enviados na requisição POST. O JSON Server espera receber um objeto JSON válido, mas o corpo da requisição está sendo enviado como um mapa Dart comum, o que não é interpretado corretamente como JSON pelo servidor.

Para corrigir isso, você precisa converter os dados para uma string JSON antes de enviá-los. Você pode fazer isso utilizando o método json.encode da biblioteca dart:convert. Além disso, é importante definir o header 'Content-Type': 'application/json' para informar ao servidor que o corpo da requisição contém um JSON.

Aqui está o seu método register atualizado:

import 'dart:convert';
import 'package:http/http.dart' as http;

class JournalServices {
  static const String url = 'http://192.168.15.59:3000/';
  static const String resource = 'learnhttp/';

  String getURL() {
    return '$url$resource';
  }

  Future<void> register(String content) async {
    var response = await http.post(
      Uri.parse(getURL()),
      headers: {'Content-Type': 'application/json'},
      body: json.encode({'content': content}),
    );
    print(response.body); // Para verificar a resposta do servidor
  }
}

Note que agora o método register é assíncrono e usa await para esperar a resposta do servidor. Isso é uma boa prática para garantir que a requisição foi processada antes de continuar a execução do programa. Além disso, adicionei um print para que você possa ver a resposta do servidor no console, o que pode ajudar a entender o que aconteceu com a requisição.

Tente fazer essas alterações e executar novamente o seu código. Isso deve resolver o problema do erro "is not valid JSON".

Espero ter ajudado e bons estudos!

por Jonathas de Azevedo Corrêa Assumpção
| 20.6k xp | 7 posts
Gerente de Infraestrutura de TI

Renan, muito obrigado pela sua resposta, mas agora eu náo estou obtendo retorno nenhum da requisição POST.

No curso Web API criamos essa pagina para que quando dessemos reload na aplicação esse POST seria enviado, porém quando dou o Reload nada acontece e não recebo retorno algum nem do terminal do servidor nem do Print que colocamos