Блог

Я создаю API с NodeJS в качестве серверной части моего интерфейсного веб-приложения с помощью Bootstrap. Вчера начал изучать интерфейс и почти не знаю, что делать.

Теперь я почти исправил все ошибки, но не могу найти способ использовать свой ответ из сообщения, которое я отправляю.

вот мой внутренний маршрут:

     app.post('/move/data', function (req, res) {

        let movement = req.body;
        console.log(movement);

        if (validateMove(movement).status != 200) {
            console.log(movement)
            res.send(validateMove(movement).message);
        }
        position = (Number(movement.holeSize) * 10) - 25;
        console.log(position);

        res.sendStatus(validateMove(movement).status) // No Front, chamar o up
    });
  

и вот скрипт во внешнем интерфейсе

 function sendData() {

    console.log('start')
    // test to check transition
    // document.getElementById('worm').style.top = "300px";

    const dataForm = new FormData(document.getElementById("dataForm"));

    fetch('http://localhost:3000/move/data', {
        method: 'post',
        body: dataForm
    }).then(function (respose) {
        return respose.text();
    }).then(function (text) {
        console.log(text);
    }).catch(function (error) {
        console.log(error)
    });
}

function moveUp(position) {

}

function moveDown(position) {

    moveUp(position);
}
  

Что мне нужно сделать, так это заставить червя подниматься и опускаться в дыру, пока он не освободится.
Я хочу сделать это, вызвав внутренний API, но мне не нужно, как выполнять эти вызовы после получения моего ответа от post.

Кто-нибудь может помочь мне с каким-нибудь советом?

Я также хочу изменить свойство «высота» из моего изображения «дыра» с помощью JS

Если вы изучаете интерфейс, то вы уже наткнулись на одну из продвинутых частей, которая выполняет запросы XHR и имеет дело с асинхронным кодом.

Я бы посоветовал вам не использовать старый XMLHttpRequest интерфейс в пользу Fetch API. Это более простой и мощный API, который делает то же самое, но с более простым синтаксисом.

Запрос на выборку возвращает a Promise , который является частью асинхронного кода. Вы можете дождаться завершения запроса, используя async / await синтаксис. Это делает ваш код почти похожим на синхронный код, но с дополнительными возможностями.

 /**
 * Since you are dealing here with promises you can use
 * the async / await syntax.
 */
async function sendData() {
  console.log('start')
  // test to check transition
  // document.getElementById('worm').style.top = "300px";

  const FD = new FormData(form);
  let response;

  try {
    // Fetch the resource and wait for the response to come in
    // before continuing in the sendData function.
    console.log('Fetching');
    response = await fetch('http://localhost:3000/move/data', {
      method: 'POST',
      body: FD
    });
  } catch (error) {
    alert('Oops! algo deu errado');
  }

  // At this point the response has been successful and
  // we can parse the body of the response to a string.
  console.log('Fetch successful. Parsing to text.');
  const text = await response.text();

  console.log('Text parsed', text);
  // Now you can use the response that is in the 
  // text variable in the rest of your code.

  // Maybe parse the text to a number for your position?
  const position = Number(text);
  let size = position   'px'
  console.log('The size is', size);
  document.getElementById('hole').style.height = size;

  moveUp(position);
}