Блог

Я использую форму, а затем данные отправляются в 2 базы данных. одна из них использует внешний API третьей части (evento), к которому я обращаюсь из своего внутреннего API (/api/v1/eticket/посетитель), а другая-в мою собственную базу данных mongo с использованием внутреннего API (/api/v1/пользователи/обновление).

Вот код на интерфейсе, который запускает форму submit

 
// UPDATE SETTINGS
const saveSettings = document.querySelector(".form-user-data");

if (saveSettings) {
  saveSettings.addEventListener("submit", async (e) => {
    e.preventDefault();
    const firstName = document.getElementById("firstName").value;
    const lastName = document.getElementById("lastName").value;
    const mobile = document.getElementById("mobile").value;
    const email = document.getElementById("email").value;
    const company = document.getElementById("company").value;
    const profile = document.getElementById("profile").value;
    const country = document.getElementById("country").value;
    const nationality = document.getElementById("nationality").value;
    const type = document.getElementById("type").value;
    const visitorId = document.getElementById("visitorId").value;

    const visitorForEvento = {
      VisitorNumber: visitorId,
      FirstName: firstName,
      LastName: lastName,
      Mobile: mobile,
      Email: email,
      Company: company,
      JobTitle: profile,
      Country: country,
      Nationality: nationality,
      Category: type,
    };

    // UPDATE EVENTO DATABASE
    await updateEvento(visitorForEvento, "evento");

    // UPDATE MONGODB
    await updateSettings(
      {
        firstName,
        lastName,
        mobile,
        email,
        company,
        profile,
        // address,
        // city,
        country,
        nationality,
        type,
      },
      "data"
    );

    alert(
      "This function should halt here and pause and then redirect to another view"
    );
  });
}


 

А вот 2 функции, которые обновляют свои собственные базы данных. Я хотел быть последовательным и использовать только fetch для обоих, но по какой-то причине это не сработало бы с fetch, но работало с axios .. и именно поэтому я использую 2 разных метода запроса ниже…

 const fetch = require("node-fetch");
import axios from "axios";

export const updateEvento = async function(data, type) {
  try {
    const url = "/api/v1/eticket/visitor";

    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });
    const res = await response.json();

    if (res.status === "success") {
      console.log(`${type.toUpperCase()} Updated`);
    }
  } catch (err) {
    alert(err.response.data.message);
  }
};

export const updateSettings = async function(data, type) {
  try {
    const url =
      type === "password"
        ? "/api/v1/users/updateMyPassword"
        : "/api/v1/users/updateMe";

    const res = await axios({
      method: "PATCH",
      url,
      data,
    });

    if (res.data.status === "success") {
      console.log(`${type.toUpperCase()} Updated`);
    }
  } catch (err) {
    alert(err.response.data.message);
  }
};



 

Теперь в функции, назначенной для «Настроек сохранения» submit , происходят 3 вещи..

updateEvento() updateMongo()

а затем я хочу, чтобы поток остановился здесь и перенаправил на другую страницу, посвященную успеху…

Однако я добавил функцию оповещения, но по какой-то причине функция продолжает двигаться вперед и не останавливается на достигнутом.. Остальные 2 функции успешно завершаются .. данные удаляются.. однако я нигде не могу сделать паузу, и особенно в конце успешного завершения обеих функций я хотел бы приостановить и перенаправить. Но я, кажется, не могу этого сделать.

Что я делаю не так?

Я понял свою ошибку, и в случае, если кто-то еще столкнется с той же проблемой, пожалуйста, дважды проверьте действие, примененное к вашей кнопке!

Я назначил функцию отправки в форму. И у кнопки был класс «обновление данных» .. но в следующий раз я буду осторожен, чтобы иметь такое общее название для кнопки.. У меня была в какой-то другой форме кнопка с аналогичным именем, и я применил функцию для события «щелчок», и эта функция включалась, когда я отправлял свою форму.

Я потерял 2 дня своей жизни.. Я надеюсь, что это поможет кому-то еще спасти их.