JavaScript - Promise

BigbrotherShin·2020년 1월 2일
0

JavaScript

목록 보기
10/17
post-thumbnail

1. 개념

Promise 개체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.

여기서는 Promise 생성자와, 인스턴스의 메서드 및 속성을 다룹니다. 프로미스의 동작 방식이나 실제 사용법은 프로미스 사용하기에서 확인할 수 있습니다.

JavaScript Demo: Promise Constructor

var promise1 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('foo');
  }, 300);
});

promise1.then(function(value) {
  console.log(value);
  // expected output: "foo"
});

console.log(promise1);
// expected output: [object Promise]

2. 구문

new Promise(executor);

매개변수(executor)

resolve 및 reject 인수를 전달할 실행 함수.

실행 함수는 프로미스 구현에 의해 resolve와 reject 함수를 받아 즉시 실행됩니다(실행 함수는 Promise 생성자가 생성한 객체를 반환하기도 전에 호출됩니다).

resolve 및 reject 함수는 호출할 때 각각 프로미스를 이행하거나 거부합니다.
실행 함수는 보통 어떤 비동기 작업을 시작한 후 모든 작업을 끝내면 resolve를 호출해 프로미스를 이행하고, 오류가 발생한 경우 reject를 호출해 거부합니다.
실행 함수에서 오류를 던지면 프로미스는 거부됩니다. 실행 함수의 반환값은 무시됩니다.

3. Promise 생성하기

Promise 객체는 new 키워드와 생성자를 사용하여 만듭니다.

생성자는 매개변수로 "실행 함수(executor)"를 받습니다. 이 함수는 매개 변수로 두 가지 함수를 가져야 하는데,

첫 번째 함수(resolve)는 비동기 작업이 성공적으로 완료되어 결과를 값으로 반환하면 호출되고,
두 번째 함수(reject)는 작업이 실패하여 오류의 원인을 반환하면 호출됩니다. 두 번째 함수는 주로 오류 객체를 받습니다.

const myFirstPromise = new Promise((resolve, reject) => {
  // do something asynchronous which eventually calls either:
  //
  //   resolve(someValue); // fulfilled
  // or
  //   reject("failure reason"); // rejected
});

함수가 프로미스를 사용하도록 하려면 단순히 프로미스를 반환하면됩니다.

function myAsyncFunction(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
}

출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

profile
JavaScript, Node.js 그리고 React를 배우는

0개의 댓글