Я следую руководству из Coding Garden. Там он записывает в базу данных и отправляет ее обратно клиенту.

Когда я пытаюсь это сделать, я не получаю ответа от сервера. Я предполагаю, что в моем коде произошла путаница.

Когда я иду к localhost/5000/posts, там нет базы данных. Почему я не получаю сообщение об ошибке или базу данных?

Всего хорошего

Ожидаемый результат : https://youtu.be/JnEH9tYLxLk?t=3060

код клиента

const form = document.querySelector('form');
const loadingElement = document.querySelector(".loading");
const API_URL = "http://localhost:5000/posts";
      
      
loadingElement.style.display = "none";

form.addEventListener('submit', (event) => {
    event.preventDefault();
    const formData = new FormData(form);
    const name = formData.get('name');
    const content = formData.get('content');
    
    const post = {
        name,
        content
        
    };
    
    form.style.display = "none";
    loadingElement.style.display= "";
    
    fetch(API_URL, {
        method: "POST",
        body: JSON.stringify(post),
        headers: {
            "content-type": "application/json"
        }
    }).then(response => response.json())
    .then(createdPost => {
        console.log(createdPost);
        
    });
    
});

код сервера

const express = require("express");
const cors = require('cors');
const monk = require("monk");

const app = express();

const db = monk("localhost/posts");
const posts = db.get("posts");


app.use(cors());
app.use(express.json());

app.get("/", (req, res) => {
       res.json({
           message: "Post"
       });
});

function isValidPost(post){
    return post.name && post.name.toString().trim() !== "" &&
        post.content && post.content.toString().trim() !=="";
}


app.post("/posts", (req, res) => {
    if (isValidPost(req.body)){
        const post = {
            name: req.body.name.toString(),
            content: req.body.content.toString(),
            created: new Date()
        };
        //console.log(post);
        posts
            .insert(post)
            .then(createdPost => {
                 res.json(createdPost);
                  });
                
    }else {
        res.status(422);
        res.json({
           message: "Hey, Titel und Inhalt werden benötigt!" 
        });
    }
});

app.listen(5000, () => {
  console.log('Listening on http://localhost:5000');
});

1
Luis Michael Luethi 29 Авг 2020 в 19:41

2 ответа

Лучший ответ

Вы забыли обработать случай, когда post.insert(...) выходит из строя и отклоняется. В этом случае с вашего сервера не будет отправлено никакого ответа, и запрос зависнет. Добавьте следующее:

posts
      .insert(post)
      .then(createdPost => {
         res.json(createdPost);
      })
      .catch(err => {
         console.log(err);
          res.status(500).json({errorMessage: err.message});
      });
0
eol 30 Авг 2020 в 09:15

Обрабатывать метод выборки с помощью catch. Вероятно, это идет на ловлю.

fetch().then().catch(err => ...)

0
hosein2rd 30 Авг 2020 в 09:29