ES6 신규 구문 (5) – Promise 상세 설명

Promise 소개

promise는 다른 동작의 정보를 얻을 수 있는 대상입니다.all,race,reject,resolve 등 몇 가지 방법이 있는데 원형에는then,catch 등의 방법이 있다.
Promise의 두 가지 특징은 다음과 같습니다.
대상의 상태는 외부의 영향을 받지 않는다.Promise 대상은 비동기적인 동작을 가져옵니다. 세 가지 상태가 있습니다: pending (진행 중),fulfilled (성공),reject (실패).비동기 조작의 결과를 제외하고는 다른 조작도 이 상태를 바꿀 수 없다.일단 상태가 바뀌면 다시는 변하지 않는다.pending에서fulfilled로,pending에서rejected상태로,fulfilled와rejected에 있으면 상태가 변하지 않습니다.상태의 단점:
Promise를 취소할 수 없습니다. 새로 만들면 즉시 실행되며 중도에 취소할 수 없습니다.
콜백 함수를 설정하지 않으면 Promise 내부에서 오류가 발생하여 외부에 반응하지 않습니다.
펜딩 상태일 때는 현재 어느 단계까지 진행되고 있는지 알 수 없다.
구문을 사용합니다.
let p = new Promise( (resolve,reject)=>{
//resolve와reject는 두 함수
})
p.then(
()=>{},//들어오는resolve 함수,resolve를 중국어로 번역하면 해결
()=>{}//들어오는 Reject 함수, Reject를 중국어로 번역하면 거부
).catch((reason,data)=>{
console.log ("catch 실패 리셋 던지기 원인",reason)
})

then 방법

n 방법은 두 개의 매개 변수를 매개 변수로 받아들인다. 첫 번째 매개 변수는Promise가 실행에 성공했을 때의 리셋이고, 두 번째 매개 변수는Promise가 실행에 실패한 리셋이다. 두 함수는 하나만 호출될 수 있다.
통과n이 추가한 리셋 함수는 언제든지 호출되며 여러 개의 리셋 함수를 추가할 수 있으며 한 번에 순서대로 독립적으로 실행됩니다.

const p =new Promise((resolve,reject)=>{
 resolve(" ")
})
p.then((res)=>{
 console.log(res)// 
},(err)=>{
 console.log(err)
})

여러 콜백 함수가 있는 경우

const p =new Promise((resolve,reject)=>{
 resolve(1)
})
p.then((res1)=>{
 console.log('res1',res1) // 1
 return res1 * 2;
}).then((res2)=>{
 console.log('res2',res2) //2
}).then((res3)=>{
 console.log('res3',res3) //undefined
 return Promise.resolve('resolve')
}).then(res4=>{
 console.log('res4',res4) //resolve
})

catch 사용법

Promise 대상 방법 then과 병행하는catch 방법catch 유사,

const p1 = new Promise((resolve,reject)=>{
 var num = Math.random()*10 ;// 0-10  
 console.log("num",num)
 if(num > 5){
  resolve(' 5')
 }else{
  reject(" 5")
 }
})
p1.then(res=>{
 console.log("res",res) // res  5
}).catch(err=>{
 console.log("err",err) // err  5
})

all 방법

all 방법은 모든 비동기 작업이 끝난 후에야 리셋을 실행하고 결과를 되돌려줍니다. 되돌아오는 데이터는 하나의 그룹이고 여러 개의 요청이 되돌아오는 데이터 조합입니다.then 방법과 동급이다.
구문: Promise.all([ p,p1,p2.... ]).then()
사용 예는 다음과 같습니다.

const p1 = new Promise((resolve,reject)=>{
 resolve({
  name:' '
 })
})
const p2 = new Promise((resolve,reject)=>{
 resolve(['a','b'])
})
const p3 = new Promise((resolve,reject)=>{
 resolve(' ')
})
Promise.all([p1,p2,p3]).then(res=>{
 console.log(res)//[{name:' '}, ['a','b'], " "]
})

레이스 방법

all는 모든 비동기 작업이 실행되면 리셋을 실행합니다.race 방법은 반대입니다. 실행이 완료되면 결과가 성공하든 실패하든 리셋을 실행하기 시작하고 나머지는 리셋에 들어가지 않습니다.되돌아오는 데이터는 가장 먼저 실행되고 되돌아오는 데이터에 달려 있습니다.

const p1 = new Promise((resolve,reject)=>{
 resolve({
  name:' '
 })
})
const p2 = new Promise((resolve,reject)=>{          
 setTimeout(()=>{
  resolve(['a','b'])
 },1000)
})
const p3 = new Promise((resolve,reject)=>{
 setTimeout(()=>{
  resolve(' ')
 },2000)
})
Promise.race([p1,p2,p3]).then(res=>{
 console.log(res)//{name:' '}
})

Promise를 사용해야 하는 이유

Promise의 이점
4

콜백 함수를 지정하는 방식이 더욱 유연합니다

4

체인 호출을 지원하여 지옥 리셋 문제를 해결할 수 있다.리셋 지옥은 리셋 함수 삽입 호출이고 외부 리셋 함수가 다른 방식으로 실행된 결과는 삽입된 리셋 함수의 집행 조건이다.지옥으로 돌아가는 단점은 읽기와 이상 처리가 불편하다는 것이다

Promise의 단점
4

Promise를 취소할 수 없습니다. 새로 만들면 즉시 실행되며 일시 중지하거나 취소할 수 없습니다

4

리셋 함수를 설정하지 않으면 Promise 내부에서 던진 오류가 외부에 반응하지 않습니다

4

pending(진행 중) 상태에 있을 때 현재 어느 단계까지 진전되었는지 알 수 없다