Promise - 비동기 적 해결 방안

Promise 대상 은 JavaScript 의 비동기 작업 솔 루 션 으로 비동기 작업 에 통 일 된 인 터 페 이 스 를 제공 하여 비동기 작업 이 동기 화 된 인 터 페 이 스 를 갖 도록 합 니 다.Promise 는 동기 화 작업 의 절 차 를 쓰 는 것 처럼 비동기 작업 을 쓸 수 있 습 니 다.
Promise 는 대상 이자 구조 함수 이다.

function f1(resolve, reject) {
  //     ...
}

var p1 = new Promise(f1);

Promise 의 디자인 사상 은 비동기 작업 이 Promise 인 스 턴 스 를 되 돌려 주 는 것 입 니 다. Promise 인 스 턴 스 는 다음 단계 의 반전 함 수 를 지정 하 는 then 방법 이 있 습 니 다.
Promise 인 스 턴 스 는 세 가지 상태 가 있 습 니 다. 각각:

       （pending）
      （fulfilled）
      （rejected）

fulfilled rejected      resolved（   ）

      ，Promise        （value），    fulfilled。
      ，Promise         （error），    rejected。

var promise = new Promise(function (resolve, reject) {
  // ...

  if (/*        */){
    resolve(value);
  } else { /*        */
    reject(new Error());
  }
});

resolve 함 수 는 Promise 인 스 턴 스 의 상 태 를 '미 완성' 에서 '성공' (즉, pending 에서 fulfilled) 으로 바 꾸 고 비동기 작업 이 성공 할 때 호출 하 며 비동기 작업 의 결 과 를 매개 변수 로 전달 하 는 역할 을 합 니 다.reject 함수 의 역할 은 Promise 인 스 턴 스 의 상 태 를 '미 완성' 에서 '실패' (즉, pending 에서 rejected) 로 바 꾸 고 비동기 작업 이 실 패 했 을 때 호출 하 며 비동기 작업 이 보고 한 오 류 를 매개 변수 로 전달 하 는 것 입 니 다.

Promise.then()
Promise 인 스 턴 스 의 then 방법 은 리 셋 함 수 를 추가 하 는 데 사 용 됩 니 다.
then 방법 은 두 개의 반전 함 수 를 받 아들 일 수 있 습 니 다. 첫 번 째 는 비동기 작업 이 성공 할 때 (fulfilled 상태 로 변 함) 의 반전 함수 입 니 다. 두 번 째 는 비동기 작업 이 실 패 했 을 때 (rejected 로 변 함) 의 반전 함수 입 니 다. (이 매개 변 수 는 생략 할 수 있 습 니 다)일단 상태 가 바 뀌 면 상응하는 반전 함 수 를 호출한다.

var p1 = new Promise(function (resolve, reject) {
  resolve('  ');
});
p1.then(console.log, console.error);
// "  "

var p2 = new Promise(function (resolve, reject) {
  reject(new Error('  '));
});
p2.then(console.log, console.error);
// Error:   

위의 코드 에서 p1 과 p2 는 모두 Promise 인 스 턴 스 입 니 다. 그들의 then 방법 은 두 개의 반전 함수 에 연결 되 어 있 습 니 다. 성공 시의 반전 함수 console. log, 실패 시의 반전 함수 console. error (생략 할 수 있 습 니 다).p1 의 상태 가 성공 으로 바 뀌 고 p2 의 상태 가 실패 로 바 뀌 며 대응 하 는 리 셋 함 수 는 비동기 동작 으로 전 송 된 값 을 받 고 콘 솔 에서 출력 합 니 다.
아래 promise 의 서로 다른 문법 아래 의 다른 결 과 를 분석 하 다

f1().then(function () {
  return f2();
}).then(f3);   //f3       ， f2       。

f1().then(function () {
  f2();
  return;
}).then(f3);  //f3        undefined。

f1().then(f2())
  .then(f3);  //f3       ， f2            。

f1().then(f2)
  .then(f3);  //f2    f1()     。

그림 불 러 오기
우 리 는 그림 의 불 러 오 기 를 Promise 대상 으로 썼 다.

var a = function () {
    return new Promise(function (resolve, reject){
      var image = new Image()
      image.onload = resolve
      image.onerror = reject
      image.src = path 
    })
}