HTML 양식에서 약속 및 비동기/대기 사용

Promise 객체는 비동기 작업의 최종 완료(또는 실패)와 그 결과 값을 나타냅니다.

Promise 객체는 state와 result라는 두 가지 속성을 지원합니다. Promise 객체가 "보류 중"(작동 중)인 동안 결과는 정의되지 않습니다. Promise 객체가 "이행"되면 결과는 값입니다. Promise 객체가 "거부"되면 결과는 오류 객체입니다.

우리는 ajax에 대한 약속을 많이 사용합니다. 그러나 우리는 그것을 다른 용도로도 사용할 수 있습니다. 그것은 우리의 삶을 더 쉽게 만들 수 있습니다. 그리고 우리는 HTML Form으로 작업하면서 이 기능을 사용할 수 있습니다.

My simple HTML Form

<form hidden action="">
   <input type="text" name="name" />
   <br />
   <input type="text" name="username" />
   <br />
   <input type="password" name="password" />
   <br />
   <button type="submit">Submit</button>
   <button type="button">Close</button>
</form>
<button id="newUser">New User</button>

JavaScript Setup

const newUserBtn = document.getElementById("newUser");
const formElement = document.querySelector("form");

newUserBtn.addEventListener("click", createUser);

우리는 Promise와 함께 일하고 있습니다. Promise로 작업하는 두 가지 주요 방법:

//  Async/Await version
const createUser = async () => {
  try {
    const data = await form.getData();
    // Do something with your data
    console.log(data);
  } catch (error) {
    // if user closes the form
    console.log("User canceled the operation");
  }
};

// Then/Catch version
const createUser = () => {
  form
    .getData()
    .then((data) => {
      // Do something with your data
      console.log(data);
    })
    .catch(() => {
      // if user closes the form
      console.log("User canceled the operation");
    });
};

이제 주요 부분:

const form = {
  open() {
    // Open your Form, In my case:
    formElement.removeAttribute("hidden");
  },

  close() {
    // Close your Form, In my case:
    formElement.setAttribute("hidden", "");
  },

  getData() {
    this.open(); // Opening Form

    return new Promise((resolve, reject) => {
      const submitHandler = (event) => {
        // Prevent Default Reload
        event.preventDefault();

        // Getting Form input values
        const name = formElement["name"].value;
        const username = formElement["username"].value;
        const password = formElement["password"].value;

        // Sending fulfilled data
        resolve({ name, username, password });

        // Closing the Form
        this.close();
      };

      const closeHandler = () => {
        // Rejecting the promise
        reject();

        // Closing the form
        this.close();
      };

      formElement.addEventListener("submit", submitHandler, { once: true });
      formElement.addEventListener("reset", closeHandler, { once: true });
    });
  }
};

Result

데모(코드펜)

이것은 나의 첫 번째 글입니다. 그러니 실수에 대해 신경쓰지 마세요.