프로미스 (1)

줄곧 프로미스에 대해 들었지만 이전에 사용한 적이 없어요. 관련 자료를 찾아보고 나서 프로미스를 정리하고 싶어요.

1. 프로미스의 의미

promise는 전통적인 해결 방안인 리셋 함수와 이벤트보다 합리적이고 강력한 비동기 프로그래밍 솔루션이다.만약 여러 개의 비동기적인 요청이 함께 있다면, 깊이 박힌 상황이 발생하여 읽기와 유지보수에 어려움을 가져올 것이다.
Promise 객체에는 다음과 같은 두 가지 특성이 있습니다.
(1) 대상의 상태가 외부의 영향을 받지 않는다.Promise 대상은 세 가지 상태가 있는데 그것이 바로 pending (진행 중),fulfilled (성공),rejected (실패) 이다.비동기 조작의 결과만 현재 어떤 상태인지 결정할 수 있으며, 그 어떠한 다른 조작도 이 상태를 바꿀 수 없다.프로미스라는 이름의 유래이기도 하다. 영어로는'약속'이라는 뜻으로 다른 수단을 바꿀 수 없다는 뜻이다.
(2) 일단 상태가 바뀌면 다시 변하지 않고 언제든지 이 결과를 얻을 수 있다.Promise 대상의 상태가 바뀔 수 있는 것은 두 가지입니다. pending에서fulfilled로 바뀔 수 있고, pending에서rejected로 바뀔 수 있습니다.이 두 가지 상황이 발생하기만 하면 상태가 응고되고 더 이상 변하지 않으며 이 결과를 계속 유지할 것이다. 이때를 Resolved(정형화)라고 부른다.만약 변경이 이미 발생했다면, Promise 대상에 리셋 함수를 추가하면, 즉시 이 결과를 얻을 수 있습니다.이것은 이벤트 (Event) 와 완전히 다르다. 이벤트의 특징은 그것을 놓치면 다시 감청하면 결과를 얻을 수 없다는 것이다.
Promise 대상이 있으면 비동기 조작을 동기화 조작의 절차로 표현할 수 있어 겹겹이 끼워 넣은 리셋 함수를 피할 수 있다.
예를 들어 먼저 사용자의 이름을 취득하고 이름에 따라 사용자의 핸드폰 번호를 취득하는 데는 전통적인 방식으로 해결한다.

$.get('../getUserName', function (userName) {
  $.get('../getMobile', {user:userName}, function (mobile) {
    console.log(' ：' + mobile)
  })
})

위의 예는 이렇게 promise 방안으로 바꿀 수 있다.

// 
var getUserName = function () {
return new Promise(function(resolve, reject) {
  $.get('../getUserName',function (userName) {
    resolve(userName)
  })
})
}
// 
var getMobile = function (userName) {
 return new Promise(function (resolve, reject) {
  $.get('../getMobile?user=' + userName, function (mobile) {
    resolve(mobile)
  })
})
}
// 
getUserName().then(function (userName) {
  return getMobile(userName)
}).then(function(mobile) {
  console.log(' ：' + mobile)
})

이 예에서 프로미스 방법을 사용하는 코드는 전통적인 방법의 코드보다 훨씬 많지만 사고방식이 더욱 명확하다. 프로미스는 본질적으로 비동기적인 데이터 획득과 업무 논리를 분리하여 개발자가 한 가지 사물에 전념할 수 있도록 하고 업무와 데이터를 동시에 고려할 필요가 없다.물론 프로미스도 단점이 있다.먼저 Promise를 취소할 수 없으며 새로 만들면 즉시 실행되며 중간에 취소할 수 없습니다.그 다음으로 리셋 함수를 설정하지 않으면 프로미스 내부에서 던진 오류가 외부에 반응하지 않습니다.셋째, pending 상태에 있을 때 현재 어느 단계까지 진전되었는지 알 수 없다(방금 시작했는지 곧 완성할 것인지).

2. 프로미스 실례를 만드는 방법

1.new promise()

promise는 하나의 구조 함수로 실례를 생성할 수 있다.

var myPromise = new Promise(function(resolve, reject) {
    //···
    if ( ) {
      resolve(value)
    }else {
      reject(error)
    }
})

Promise 구조 함수는 하나의 함수를 매개 변수로 받아들인다. 이 함수의 두 매개 변수는 각각 Resolve와 Reject이다.이러한 함수는 JavaScript 엔진에서 직접 배포하지 않고도 사용할 수 있는 두 가지 함수입니다.
resolve 함수의 역할은Promise 대상의 상태를'미완성'에서'성공'(즉pending에서resolved)으로 바꾸고 비동기 조작이 성공할 때 호출하며 비동기 조작의 결과를 매개 변수로 전달하는 것이다.프로젝트 함수의 역할은 Promise 대상의 상태를 '미완성' 에서 '실패' (즉 pending에서 Rejected) 로 바꾸고, 비동기 작업이 실패할 때 호출하며, 비동기 작업이 보고한 오류를 매개 변수로 전달하는 것입니다.
Promise 실례가 생성된 후, then 방법으로 각각 Resolved 상태와 Rejected 상태의 리셋 함수를 지정할 수 있습니다.

myPromise().then(function(value) {
  console.log(value)
},function(err) {
  console.log(err)
})

then 방법은 두 개의 리셋 함수를 매개 변수로 받아들일 수 있다.첫 번째 리셋 함수는 Promise 대상의 상태가 Resolved로 변할 때 호출되고, 두 번째 리셋 함수는 Promise 대상의 상태가 Rejected로 변할 때 호출된다.그 중에서 두 번째 함수는 선택할 수 있는 것이기 때문에 반드시 제공해야 하는 것은 아니다.두 함수 모두 Promise 객체에서 전송된 값을 매개변수로 받아들입니다.

2.promise.all()

Promise.all 방법은 여러 개의 Promise 실례를 새로운 Promise 실례로 포장하는 데 사용됩니다.

  var myPromise = Promise.all([promise1, promise2, promise3])

Primise.ll()는 하나의 그룹을 매개 변수로 받아들인다. 그룹의 모든 요소는 하나의 프로미스 실례이고 myPromise의 상태는promise1,promise2,promise3에 의해 결정되며 두 가지 상황으로 나뉜다.
(1)promise1,promise2,promise3의 상태만fulfilled로 변하고 myPromise의 상태는fulfilled로 변한다. 이때promise1,promise2,promise3의 반환값은 하나의 수조를 구성하여 myPromise의 리셋 함수에 전달한다.
(2)promise1, promise2, promise3 중 하나가rejected에 걸리면 myPromise의 상태는rejected로 변한다. 이때 첫 번째가reject의 실례에 의해 되돌아오는 값은 myPromise의 리셋 함수에 전달된다.

3.Promise.race()

Promise.race () 방법 역시 여러 개의 Promise 실례를 새로운 Promise 실례로 포장하는 것이다.

  var myPromise = Promise.race([promise1, promise2, promise3])

위 코드에서promise1,promise2,promise3 중 하나의 실례가 먼저 상태를 바꾸면 myPromise의 상태는 따라서 바뀐다.먼저 바뀐 Promise 실례의 반환값은 p의 리셋 함수에 전달됩니다.

4.Promise.resolve()

기존 객체를 Promise 객체, Promise로 전환해야 하는 경우가 있습니다.resolve 방법이 이 역할을 한다.Promise.resolve 방법의 매개 변수는 네 가지 상황으로 나뉜다.
(1) 매개 변수는 Promise 실례이고 매개 변수가 Promise 실례라면 Promise.resolve는 수정 없이 이 실례를 그대로 되돌려줍니다.
(2) 매개 변수는 thenable 대상이다. thenable 대상은then 방법을 가진 대상을 가리킨다. Promise.resolve 방법은 이 대상을Promise 대상으로 바꾸고 thenable 대상의then 방법을 즉시 실행합니다.

let myFun = {
  then: function (resolve, reject) {
    resolve('this is myFun')
  }
}
let myPromise = Promise.resolve(myFun)

myPromise.then(function(value) {
  console.log(value)        // this is myFun
})

(3) 매개 변수는then 방법이 있는 대상이 아니거나 대상이 아니다. 만약에 매개 변수가 원시 값이거나then 방법이 없는 대상이라면Promise.resolve 메서드는 resolved 상태로 새 Promise 객체를 반환합니다.Promise.resolve 방법의 매개 변수입니다. 리셋 함수에 동시에 전달됩니다.

let myPromise = Promise.resolve('this is Promise')
myPromise.then(function(value) {
  console.log(value)       //this is Promise
})

(4) 매개변수 없음 Promise.resolve 방법은 호출할 때 파라미터를 사용하지 않고 resolved 상태의Promise 대상을 직접 되돌려줍니다.그래서 만약에 Promise 대상을 얻고 싶다면 비교적 편리한 방법은 바로 Promise를 직접 호출하는 것이다.resolve 방법.

let myPromise = Promise.resolve()
myPromise.then(function() {})

5.Promise.reject()

Promise.Reject () 방법도 새로운 Promise 실례를 되돌려줍니다. 이 실례의 상태는 Rejected입니다.참고, Promise.Reject () 방법의 매개 변수는 그대로 Reject의 이유로 후속 방법의 매개 변수가 됩니다.이 점은 Promise와 같습니다.resolve 방법이 일치하지 않습니다.

let myPromise = Promise.reject('this is reject')
// 
let myPromise = new Promise(function(resolve,reject) {
  reject('this is reject')
})

myPromise.then(null, function(value) {
  console.log(value)   //this is reject
})

참조:promise