My Boundary As Much As I Experienced

정확히 Promise객체는 뭘까? 본문

FrontEnd/Javascript(Vanilla)

정확히 Promise객체는 뭘까?

Bumang 2023. 12. 9. 23:36

promise에 대해서 알려줘

Promise 객체는 자바스크립트에서 비동기 작업을 처리하기 위한 객체입니다. 비동기 작업은 주로 네트워크 요청, 파일 읽기, 데이터베이스 쿼리 등과 같이 시간이 걸리는 작업을 의미합니다. Promise는 이러한 비동기 작업을 더 효율적으로 다룰 수 있도록 도와주는 패턴 중 하나입니다.

Promise는 세 가지 상태를 가집니다:

  1. Pending (대기 중): 비동기 작업이 아직 완료되지 않은 상태.
  2. Fulfilled (이행됨): 비동기 작업이 성공적으로 완료된 상태.
  3. Rejected (거부됨): 비동기 작업이 실패한 상태.

Promise 객체는 다음과 같은 구조를 가지고 있습니다:

const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  // 성공 시 resolve() 호출, 실패 시 reject() 호출
});

myPromise.then((result) => {
  // 성공 시 실행되는 코드
}).catch((error) => {
  // 실패 시 실행되는 코드
});

Promise를 사용하면 콜백 헬(callback hell)을 방지하고 비동기 코드를 보다 구조화된 형태로 작성할 수 있습니다. ES6부터 기본적으로 지원되며, 현대적인 자바스크립트 코드에서 자주 사용됩니다.

 

 

Promise는 object의 instance야?

네, 정확히 말하면 Promise는 JavaScript에서 객체의 인스턴스입니다. Promise는 내장 객체로, Promise 생성자 함수를 사용하여 새로운 Promise 객체를 생성할 수 있습니다.

 

 

 

누가 만들었어?

ECMAScript 6 (ES6)에서는 Promise가 표준으로 도입되었으며, TC39 (Technical Committee 39)라 불리는 ECMAScript 표준화 위원회에서 이에 대한 명세를 개발했습니다. TC39에는 다양한 기업과 개발자가 참여하고 있습니다.

 

구체적으로, 프로미스 명세는 TC39의 Brendan Eich, Domenic Denicola, Mark S. Miller, Kris Kowal, Kevin Smith, and Alex Russell 등의 기여를 받았습니다. 그리고 이러한 기여를 토대로 프로미스는 ECMAScript 6 표준의 일부로 채택되었습니다.

 

 

 

promise는 자료형이라고 할수도 있는걸까

Promise는 자바스크립트에서 객체의 인스턴스입니다. 그러므로 자료형이라기보다는 객체입니다. 자바스크립트에서 기본 데이터 타입은 원시(primitive) 타입인 Number, String, Boolean, Null, Undefined, 그리고 Symbol이 있습니다. 객체는 이러한 원시 타입이 아닌 모든 것을 나타내는 포괄적인 개념이며, Promise 역시 이 객체의 일종입니다.

 

Promise는 비동기 작업을 처리하는 데 사용되는 특별한 객체이며, Promise 객체는 다양한 메서드를 가지고 있습니다. 그리고 Promise 객체는 상태를 가지고 있어 이행(fulfilled), 거부(rejected), 혹은 대기(pending) 중 하나의 상태를 가집니다.

따라서 자료형을 엄밀히 정의한다면 **Promise**는 객체입니다. 예를 들면 typeof 연산자를 사용하면 Promise 객체의 타입을 확인할 수 있습니다:

⇒ 즉 특수한 목적으로 만들어진 객체의 인스턴스일 뿐이다.

 

 

 

인터프리터가 생성자 함수를 호출하는 선언식을 만나자마자

promise를 생성하고 콜백함수의 명령들을 수행하는거지?

 

const myPromise = new Promise((resolve, reject) => { /* ... */ });

코드를 만나면, Promise 객체가 생성되고 즉시 콜백 함수가 실행됩니다. 그러나 콜백 함수 내에서 정의된 작업이 비동기적인지 여부에 따라서 전체적인 실행 흐름이 달라집니다.

콜백 함수 내에서 동기적인 작업이 있다면, 해당 작업은 콜백 함수가 실행되는 동안 진행됩니다. 그러나 콜백 함수 내에서 비동기적인 작업이 시작되면, 이 작업은 비동기적으로 진행됩니다.

⇒ Promise는 선언과 동시에 콜백함수가 즉시 실행된다.

 

 

 

promise를 원할때 실행시키고 싶으면 promise를 반환하는 함수를 만들어서 원할 때 실행하면 되겠네?

맞습니다. 함수 내에서 Promise를 생성하고 반환하면, 이 함수를 호출한 시점에서 Promise의 실행을 제어할 수 있습니다. 이러한 패턴을 사용하여 필요한 시점에 비동기 작업을 시작하고 그 결과를 다룰 수 있습니다.

function delayedPromise() {
  return new Promise((resolve, reject) => {
    console.log("비동기 작업을 시작합니다.");

    // 예시: 1초 후에 작업이 완료됨
    setTimeout(() => {
      const success = true; // 작업 성공 여부

      if (success) {
        resolve("작업 성공!");
      } else {
        reject("작업 실패!");
      }
    }, 1000);
  });
}

// 원하는 시점에 Promise 실행
delayedPromise()
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });

 

 

 

fetch api를 사용해서 비동기 통신을 하면 그 반환값으로 promise객체를 받는거야?

네, 맞습니다. fetch API를 사용하면 비동기적으로 네트워크 리소스를 요청하고, 해당 요청에 대한 응답을 담은 Promise 객체를 반환합니다. 이를 통해 간편하게 비동기 통신을 다룰 수 있습니다.

const apiUrl = 'https://api.example.com/data';

// fetch를 사용하여 비동기 요청
fetch(apiUrl)
  .then(response => {
    // 응답(response)을 JSON으로 파싱하여 반환
    return response.json();
  })
  .then(data => {
    // 파싱된 데이터를 사용
    console.log(data);
  })
  .catch(error => {
    // 에러 처리
    console.error('Error:', error);
  });

 

위 코드에서 fetch(apiUrl)는 비동기적으로 apiUrl에 대한 HTTP 요청을 시작하고, 이에 대한 응답은 Promise를 반환합니다. 이후에 then 메서드를 사용하여 응답을 JSON으로 파싱하고, 또 다른 then 메서드를 사용하여 파싱된 데이터를 다룹니다. 마지막으로 catch 메서드를 사용하여 에러를 처리합니다.

 

fetch는 기본적으로 성공 응답(200번대)에 대해서만 Promise를 이행시키고, 그 외의 경우에는 Promise를 거부시킵니다. 따라서 then 메서드에서 응답의 상태 코드를 확인하고, 에러 상황에 대한 처리를 추가할 수 있습니다.

 

 

axios를 활용해서 불러와도 promise를 받는건 똑같은거지?

네, 맞습니다. axios는 HTTP 클라이언트 라이브러리로서, 비동기 HTTP 요청을 보내는 데 사용됩니다. axios를 사용하면 서버로부터의 응답이 담긴 Promise 객체를 받게 됩니다. 사용 방법은 fetch API와 비슷합니다.

 

 

 

'FrontEnd > Javascript(Vanilla)' 카테고리의 다른 글

변수 호이스팅 [심화]  (0) 2024.02.19
XMLHttpRequest는 뭐고 AJAX는 뭘까?  (1) 2023.12.10
브라우저 렌더링 과정  (0) 2023.10.31
클로저, 렉시컬 스코프 (정리중)  (0) 2023.09.05
호이스팅의 이유  (0) 2023.08.29