🤟
Vanilla-JS
  • TRIPLE-PLUS Adout
  • Babel.JS
  • 01.Vanilla-JS
    • 01. Hello JavaScript
    • 02. 변수
      • 02-1.지키면 좋은 룰(더 좋은 스타일을 위해서)
      • 02-2.숫자형꿀팁(수식 줄이기)
    • 03. 연산자
    • 04. 조건문
    • 05. 함수
      • this의 의미 6개 총정리
      • event listener와 constructor
      • 05-1. return:돌려주다
      • 05-2. 형 변환 함수
      • 05-3. Arrow function
    • 06. 객체
    • 07. 배열
      • 07-1. 배열 안에 배열(2차 배열)
      • 07-2. 배열내장 함수(forEach)
      • 07-3. 배열내장 함수(sort)
      • 07-4. 배열내장 함수(map)
      • 07-5. 배열내장 함수(indexOf)
      • 07-6. 배열내장 함수(filter)
      • 07-7. 배열내장 함수(splice, slice)
      • 07-8. 배열내장 함수(shift, unshift, pop, push)
      • 07-9. 배열내장 함수(concat, join)
      • 07-10. 배열내장 함수(reduce)
      • 07-10. 배열내장 함수(reduce)2
    • 08. 반복문
    • 09. Class와 프로토타입
      • 09-1. 프로토타입과 클래스 - 생성자
      • 09-2. 프로토타입과 클래스 - 생성자 상속하기
      • Class & Constructor & Method
      • super
      • Static Method
      • Class Getter, Setter
      • Information Hiding
      • Inheritance & Polymorphism
      • Overriding
      • Abstract Class
      • Interface
    • Math 정리
    • String 정리
    • Array정리
    • Date 정리
      • D-day 구하기
  • 02.Vanilla-JS
    • 01.삼항연산자
    • 02. Truthy and Falsy
    • 03. 단축 평가 논리 계산법
    • 04. 함수 업그레이드 (default parameter/arguments)
    • 05. 조건문 더 스마트하게 쓰기
    • 06. 비구조화 할당 (구조분해) 문법
    • 07. spread 와 rest
      • 함수 파라미터에서의 rest(params)
      • 함수 인자에서의 spread
    • 08. 자바스크립트의 Scope 에 대한 이해
    • 09. Hoisting 이해하기
    • 10. Native DOM 선택
  • 03.비동기 처리
    • 01. fetch, then, catch[Promise] 이해하기
    • 02. 직접 만들어보는 Promise 객체
    • 03. async/await
    • 04. Promise all, Promise.race
  • REST API 제대로 알고 사용하기
    • mongodb Atlas
    • mongodb Atlas(DB)에 접근하려면
    • URL 이름짓기 관습
    • Database에 자료 저장하는 법
    • 게시물마다 번호를 달아 저장하기
    • 게시물마다 번호를 달아 저장하기2
  • JQUERY + SCRIPT 유용한 코드 정리
  • Practice(실습)
    • 카운터 만들기
    • reduce
    • 데이터 자료형 활용하기1
    • 데이터 자료형 활용하기2
    • 데이터 가지고 놀기(응용)1
    • 데이터 가지고 놀기(응용)2
    • REST API
    • 배열 만들기1
    • 배열 만들기2
    • 배열 만들기3
    • 비구조화 할당
    • rest + spread(응용)1
    • rest + spread(응용)2
    • rest + spread(응용)3
    • 반복문 내장함수(응용)1
    • 함수 가지고 놀기(응용)1
    • 서버와의 통신1
    • 서버와의 통신2
    • new Promise(응용)2
    • new Promise(응용)3
    • 자바스크립트 이벤트 위임 핵심 정리
Powered by GitBook
On this page
  • 🙋‍♂️ 직접 만들어보는 Promise 객체
  • promise 객체를 fulfilled상태로 만들어 보겠습니다.
  • 이번에는 Promise 객체를 reject상태로 만들어 보겠습니다.

Was this helpful?

  1. 03.비동기 처리

02. 직접 만들어보는 Promise 객체

Previous01. fetch, then, catch[Promise] 이해하기Next03. async/await

Last updated 3 years ago

Was this helpful?

🙋‍♂️ 직접 만들어보는 Promise 객체

01) fetch, then, catch[Promise] 이해하기 설명문에서는 fetch 함수에서 리턴되는 promise 객체를 사용했습니다. 그런데 사실 이렇게 어떤 함수가 리턴하는 promise객체를 가져다가 쓰는것이 아니라, 직접 promise 객체를 생성하는것도 가능 합니다.

이번에는 직접 promise객체를 만드는 방법에 대해서 알아보겠습니다.

아래 코드가 바로 promise 객체를 직접 생성하는 코드 입니다.

//  promise 객체를 직접 생성하는 코드

const p = new Promise((resolve, reject) => {

});

바로 이 부분이 promise 객체를 생성합니다.

여기서 중요한것은 파라미터로 들어간 'executor'라는 함수 입니다. 또 함수 파라미터에는 resolve, reject가 있습니다. 이 2 파라미터는 아주 특별한 의미가 있습니다.

setTimeout함수를 써서 2초 후에 resolve 함수로 연결된 파라미터를 실행하도록 했습니다. resolve 함수는 promise 객체를 fulfilled상태로 만드는 함수 입니다.

promise 객체를 fulfilled상태로 만들어 보겠습니다.

const p = new Promise((resolve, reject) => {
    setTimeout(() => {resolve('success');}, 2000);
});

그렇다면 p라는 promise 객체가 2초후에 fulfilled상태로 된다는 뜻입니다. 그리고 이때 resolve 함수안에 넣은 'success'문자열이 작업성공 결과가 됩니다.

const p = new Promise((resolve, reject) => {
    setTimeout(() => {resolve('success');}, 2000);
});

p.then((result) => {console.log(result);});
// 결과) 2초 후에 
success

이번에는 Promise 객체를 reject상태로 만들어 보겠습니다.

reject함수는 생성되는 promise 객체를 reject상태로 만듭니다. 그리고 reject함수에 아규먼트로 에러객체가 작업 실패 정보가 됩니다.

const p = new Promise((resolve, reject) => {
    // setTimeout(() => {resolve('success');}, 2000);
    setTimeout(() => {reject(new Error('fail')); }, 2000); //resolve험수를 reject함수로 바꿨습니다. 
});

p.catch((error) => {console.log(error);});
// 결과) 2초 후에 
Error: fail

이번에는 간단한 Promise 객체를 직접 만들어 보었습니다.