Promise 함수

김윤진·2024년 2월 8일
0

Promise

  • 쉽게 생각하면 미래에 대한 길찾기
    .then이란 성공시 미래
    .catch란 실패시 미래

Promise함수의 resolve & reject

  • Promise 함수는 JavaScript에서 비동기 작업을 처리하기 위해 사용되는 객체입니다. Promise 객체는 성공 또는 실패와 같은 상태를 가지며, 해당 상태에 따라 resolve와 reject 함수를 호출합니다.

  • resolve 함수: Promise 객체가 성공적으로 완료되었을 때 호출되는 함수입니다. resolve 함수는 인자로 전달된 값을 Promise 객체의 “then” 메서드로 전달합니다. 이를 통해 비동기 작업의 결과를 처리할 수 있습니다.

  • reject 함수: Promise 객체가 실패한 경우 호출되는 함수입니다. reject 함수는 인자로 전달된 값을 Promise 객체의 “catch” 메서드로 전달합니다. 이를 통해 비동기 작업의 실패 상황을 처리할 수 있습니다.

Promise 함수를 사용하여 비동기 작업을 처리하고 resolve와 reject 함수를 사용하는 예시입니다

function fetchData() {
  return new Promise((resolve, reject) => {
    // 비동기 작업 수행
    if (/* 작업 성공 */) {
      resolve('데이터를 성공적으로 가져왔습니다.');
    } else {
      reject('데이터를 가져오는데 실패했습니다.');
    }
  });
}

fetchData()
  .then((data) => {
    console.log(data); // '데이터를 성공적으로 가져왔습니다.'
  })
  .catch((error) => {
    console.error(error); // '데이터를 가져오는데 실패했습니다.'
  });

위의 예시에서는 fetchData 함수가 Promise 객체를 반환하고, resolve 함수는 ‘데이터를 성공적으로 가져왔습니다.’라는 값을 전달하며, reject 함수는 ‘데이터를 가져오는데 실패했습니다.’라는 값을 전달합니다. 이후 then 메서드와 catch 메서드를 사용하여 성공 또는 실패 상황에 대한 처리를 수행합니다.

then,catch와 resolve,reject의 차이점

  • then과 catch는 Promise 객체의 메서드로, resolve와 reject는 Promise 객체 내부에서 호출되는 함수입니다.

  • then: Promise 객체가 성공적으로 완료되었을 때 호출되는 메서드입니다. then 메서드는 resolve 함수가 호출될 때 실행됩니다. then 메서드는 두 개의 콜백 함수를 인자로 받습니다. 첫 번째 콜백 함수는 Promise 객체가 성공적으로 완료되었을 때 실행되며, resolve 함수로 전달된 값이 인자로 전달됩니다. 두 번째 콜백 함수는 선택적으로 사용할 수 있으며, Promise 객체가 실패한 경우에 실행됩니다.

  • catch: Promise 객체가 실패했을 때 호출되는 메서드입니다. catch 메서드는 reject 함수가 호출될 때 실행됩니다. catch 메서드는 하나의 콜백 함수를 인자로 받으며, Promise 객체가 실패한 경우에 해당 콜백 함수가 실행됩니다. 이를 통해 에러 처리를 수행할 수 있습니다.

  • resolve와 reject는 Promise 객체 내부에서 호출되는 함수로, Promise 객체의 상태를 변경합니다.

  • resolve: Promise 객체를 성공적으로 완료했을 때 호출되는 함수입니다. resolve 함수는 인자로 전달된 값을 then 메서드로 전달합니다. 이를 통해 비동기 작업의 결과를 처리할 수 있습니다.

  • reject: Promise 객체가 실패했을 때 호출되는 함수입니다. reject 함수는 인자로 전달된 값을 catch 메서드로 전달합니다. 이를 통해 비동기 작업의 실패 상황을 처리할 수 있습니다.

  • then과 catch는 Promise 객체의 메서드로, resolve와 reject는 Promise 객체 내부에서 호출되는 함수입니다. then은 Promise 객체가 성공적으로 완료되었을 때 실행되며 resolve 함수로 전달된 값이 인자로 전달됩니다. catch는 Promise 객체가 실패했을 때 실행되며 reject 함수로 전달된 값이 인자로 전달됩니다.

메서드와 함수의 차이점

  • 메서드(Method)와 함수(Function)은 JavaScript에서 코드를 구성하는 기본적인 단위입니다.

  • 메서드(Method): 객체(Object)에 속한 함수를 의미합니다. 객체가 가지고 있는 기능 또는 동작을 나타내는 코드 블록입니다. 객체의 속성으로 정의되며, 객체에 속한 함수이므로 해당 객체의 데이터나 다른 메서드에 접근할 수 있습니다.

예를 들어, 다음은 객체 내부에 속한 메서드의 예시입니다

const myObj = {
  prop1: 'value1',
  prop2: 'value2',
  myMethod: function() {
    console.log('This is a method');
    console.log(this.prop1); // 객체 내부의 속성 접근
    console.log(this.prop2);
  }
};

myObj.myMethod(); // 메서드 호출

위의 예시에서 myObj 객체는 prop1, prop2 두 개의 속성과 myMethod라는 메서드를 가지고 있습니다. myMethod는 객체 내부의 속성에 접근하고, 해당 메서드를 호출할 때 사용됩니다.

  • 함수(Function): 일련의 코드를 실행하는 독립적인 블록으로, 재사용 가능한 코드 조각을 나타냅니다. 함수는 입력 값을 받아서 처리하고, 결과 값을 반환할 수 있습니다. 함수는 호출되어 사용되는 단위로, 필요한 기능을 수행하기 위해 실행됩니다.

예를 들어, 다음은 함수의 예시입니다

function addNumbers(num1, num2) {
  return num1 + num2;
}

const sum = addNumbers(5, 10);
console.log(sum); // 15

위의 예시에서 addNumbers 함수는 두 개의 숫자를 입력받아 합을 반환하는 함수입니다. 함수를 호출할 때 인자로 5와 10을 전달하고, 반환된 결과 값을 sum 변수에 저장합니다. 그 후 sum 변수의 값을 출력합니다.

메서드는 객체에 속한 함수를 의미하며, 함수는 독립적인 코드 블록으로 재사용 가능한 기능을 나타냅니다.

profile
성장하고 싶은 프론트엔드

0개의 댓글