자바스크립트 .then() 사용법

본 글은 google의 Bard를 이용해서 작성한 글입니다.

• 바드한테 개념정리 --> 실행과정을 표로 정리 --> 일상생활의 예에 빗대서 설명 --> 마크다운 문법으로 변환하라고 하자 아래의 글이 나왔다...
• 너무 편하고 잘 만들어주는 것 같다. 앞으로는 자주 이용해야겠다.

JavaScript의 .then() 함수

.then() 함수는 JavaScript에서 비동기 코드를 작성하는 데 사용되는 Promise의 메서드입니다. 이 함수는 프로미스가 이행되거나 거부될 때 실행될 콜백 함수를 취합니다.

프로미스가 이행되면 .then() 함수는 프로미스의 결과를 콜백 함수의 첫 번째 인수로 전달합니다. 프로미스가 거부되면 .then() 함수는 프로미스의 오류를 콜백 함수의 첫 번째 인수로 전달합니다.

.then() 함수는 Promise를 반환하므로 .then() 함수를 체인으로 연결하여 여러 비동기 작업을 연결하는 데 사용할 수 있습니다. 예를 들어, .then() 함수를 사용하여 파일을 읽고, 그 내용을 해석하고, 결과를 화면에 표시할 수 있습니다.

다음은 .then() 함수의 사용 예입니다.

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 실행
  resolve("이행된 값");
});

promise.then((value) => {
  // 프로미스가 이행될 때 실행
  console.log(value); // "이행된 값"
});

다중 then 사용

다음은 .then() 함수를 사용하여 여러 비동기 작업을 연결하는 방법을 보여주는 예입니다.

const promise1 = new Promise((resolve, reject) => {
  // 비동기 작업 1 실행
  setTimeout(() => {
    resolve("값 1");
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  // 비동기 작업 2 실행
  setTimeout(() => {
    reject("오류");
  }, 2000);
});

promise1.then((value1) => {
  // promise1이 이행되면 실행
  console.log(value1); // "값 1"
  return promise2;
}).then((value2) => {
  // promise2가 이행되면 실행
  console.log(value2); // 실행되지 않음
}).catch((error) => {
  // promise가 거부되면 실행
  console.log(error); // "오류"
});

이 예에서는 promise1과 promise2라는 두 개의 프로미스를 생성합니다. 그런 다음 promise1이 이행되면 promise2를 반환하는 .then() 함수를 사용하여 promise1을 연결합니다. 그런 다음 promise2가 이행되면 console.log() 함수를 사용하여 value2를 인쇄하는 .then() 함수를 사용하여 promise2를 연결합니다.

이 예에서 promise1과 promise2는 모두 1초와 2초 후에 이행됩니다. promise1이 이행되면 promise2가 반환됩니다. promise2는 2초 후에 이행되고 console.log() 함수를 사용하여 value2가 인쇄됩니다.

.then() 함수는 비동기 코드를 작성하는 데 매우 강력한 도구입니다. 이를 사용하여 복잡한 비동기 작업을 쉽게 작성할 수 있습니다.

.then() 함수와 catch() 함수의 일상 생활 예

.then() 함수와 catch() 함수는 일상 생활에서 약속과 실망과 유사합니다.

• 약속은 미래에 일어날 일을 나타내고 .then() 함수는 약속이 이행되었을 때 수행할 작업을 나타냅니다.
• 실망은 미래에 일어날 일이 일어나지 않을 것을 나타내고 catch() 함수는 실망이 발생했을 때 수행할 작업을 나타냅니다.

예를 들어, 친구와 저녁 식사 약속을 했다면 약속은 미래에 일어날 일을 나타냅니다. .then() 함수는 저녁 식사 약속이 이행되면 수행할 작업을 나타냅니다. 예를 들어, 저녁 식사 약속이 이행되면 레스토랑에 가서 식사를 할 수 있습니다. 그러나 친구가 아파서 저녁 식사 약속을 할 수 없다면 실망이 발생합니다. catch() 함수는 실망이 발생했을 때 수행할 작업을 나타냅니다. 예를 들어, 친구가 아파서 저녁 식사 약속을 할 수 없다면 친구에게 회복을 기원할 수 있습니다.

일상생활 예시 코드

const promise = new Promise((resolve, reject) => {
// 친구에게 저녁 식사 약속을 합니다.
setTimeout(() => {
if (Math.random() > 0.5) {
// 약속이 이행되었습니다.
resolve("약속이 이행되었습니다. 레스토랑에 가서 식사를 할 수 있습니다.");
} else {
// 약속이 거부되었습니다.
reject("약속이 거부되었습니다. 친구가 아파서 저녁 식사를 할 수 없습니다.");
}
}, 1000);
});

promise.then((result) => {
// 약속이 이행되면 실행
console.log(result); // "약속이 이행되었습니다. 레스토랑에 가서 식사를 할 수 있습니다." 또는 "약속이 거부되었습니다. 친구가 아파서 저녁 식사를 할 수 없습니다."
}).catch((error) => {
// 약속이 거부되면 실행
console.log(error); // "친구가 아파서 저녁 식사를 할 수 없습니다."
});

이 예시에서는 promise라는 프로미스를 생성하고, setTimeout() 함수를 사용하여 약속을 설정합니다. setTimeout() 함수는 1초 후에 완료됩니다. 프로미스가 이행되면 console.log() 함수를 사용하여 result를 출력하고, 프로미스가 거부되면 console.log() 함수를 사용하여 error를 출력합니다.