Promise, async/await, yield/generater (1)

Promise가 뭐예요?어떻게 사용합니까?

우리 좀 낮게 시작합시다. 먼저 Promise부터 시작합시다.Promise 호출 eg1을 먼저 보겠습니다.

let aPromise = new Promise(function(resolve, reject) {
  console.log(233)
  setTimeout(function(){
    console.log(466)
    resolve("DONE"); 
  }, 250);
});

분명히, Promise는 구조 함수 (쓸데없는 말) 로resolve와reject 두 개의 매개 변수를 가진 함수를 매개 변수로 받아들인다.구조 함수라면 원형(Prototype) 방법과 실례 방법이 떠오를 것이다.Promise에도 이런api가 있습니다. api를 소개하기 전에 Promise의 사용에 더 관심을 가져야 한다고 생각합니다.우선 Promise가 받아들인 매개변수는 즉시 실행됩니다.이미 실례를 만들 때 Promise의 함수 매개 변수를 호출해야 합니다.eg1과 같이 이 단락 코드를 실행할 때 컨트롤러는 233466을 즉시 출력합니다.그래, 그것은 마치 네가 원래 정상적으로 쓴 비동기적인 조작이 한 겹 하청을 맡았고, 큰 변화가 없는 것처럼, 이전에 우리가 리셋을 하려면 466 후에callback을 작성하면 된다.

Promise.then()

그러나 지금은 더 이상 예전과 같지 않습니다. resolve("DONE"); 이 코드는 성공적으로 리셋되었을 때 되돌아오는 값을 의미하는 것을 무시하지 마십시오.우리는 eg1 뒤에서 바짝 뒤쫓고 있다

aPromise.then(res=>{console.log(res)})

컨트롤러에서 466을 보고 DONE을 따라갈 수 있습니다. 만약 이것이 json을 가져오는 비동기적인 동작 (그리고 Resolve를 호출해서 되돌려줍니다) 이라면, 이 때 우리가 얻을 수 있는 것은 아마도 json일 것입니다.이때 .then에 대한 흥미가 생겼다.then은 실례적인 방법 중 하나로 두 함수를 매개 변수로 받아들이고 두 번째 매개 변수는 선택할 수 있다.

aPromise.then(onFulfilled[, onRejected]);

@ 별말 Q: 이런 표현을 어떻게 이해합니까...

aPromise.then(function(value) {
  // fulfillment
}, function(reason) {
  // rejection
});

fulfilled: 이 함수는 fulfilled 상태일 때의 반환값입니다. Promise 상태가fulfilled일 때 이 함수가 호출됩니다.onRejected: 이 함수는 Rejected 상태일 때의 반환값입니다. Promise 상태가 Rejected일 때 호출됩니다.이것은 실례적인 또 다른 방법을 언급할 필요가 없다. .catch() 이 방법은rejected 상태의 반환값만 처리하고 호출 형식은 then과 같다. 사실catch는

aPromise.then(undefined, onRejected);

promise.catch(function(rej) {
    //  
    console.log(rej)
});

Promise 상태?

그렇습니다. 우리는 또 새로운 것을 끌어냈습니다. Promise의 상태입니다. 여기서 말하는 것은 실례적인 상태, 즉 new가 되돌아오는 대상의 상태입니다.하나의promise는 세 가지 상태가 있습니다:pending: 대상이 방금 생성되었음을 의미합니다. 초기 상태fulfilled: 조작 성공rejected: 조작 실패:promise는 어떻게pengding에서 다른 두 상태로 발전합니까?최초의 구조 함수로 돌아가다.

let aPromise = new Promise((resolve, reject) => {
    setTimeout(function(){
        console.log(466)
        reject("REJECT");
    }, 250);
});
aPromise.then((res)=>{console.log(res,'res')},rej =>{console.log(rej,"rej")})

콘솔 출력

466
REJECT rej

알 수 있듯이resolve/reject를 통해promise의 상태를 더욱 fulfilled/rejected로 할 수 있습니다.

let aPromise = new Promise((resolve, reject) => {
    setTimeout(function () {
        console.log(466);
        reject("REJECT");
    }, 250);
    setTimeout(function () {
        console.log(233);
        resolve("DONE");
    }, 600);
});
aPromise.then((res) => {
    console.log(res, 'res')
}, rej => {
    console.log(rej, "rej")
});
// 
466
REJECT rej
233

promise가 한 번만 바뀌는 걸 볼 수 있어요.
주의해야 할 것은 호출.then이든 호출.catch이든 둘 다promise 대상을 계속 (즉시) 되돌려준다는 것이다.여러 개.then를 연속으로 사용하면 .then() 리셋에서 값을 되돌린다고 해석할 수 있습니다. 이 값으로 다음 .then(), .then() 리셋에서 클래스promise 내용을 되돌려주면 다음 .then 은promise 상태가 settled (rejected/fulfilled) 로 변경될 때 호출됩니다. @Q: 이 덩어리는 사실 완전히 이해하지 못했는데...이것은 우리가 이렇게 할 수 있다는 것을 의미한다

getJson('a.json')
    .then(json => {
        return jsonOperate1(json)
    })
    .then(json2 => {
        return jsonOperate2(json2)
    })
    .then(json3 => {
        return jsonOperate3(json3)
    })

원래의 점진적인 반전을 버렸는데..하지만 이곳은 주의해야 한다.then과.catch의 차이.

getJson('a.json')
   .then(json => {
       return jsonOperate1(json)
   })
   .catch(err => {
       return errOperate1(err)
   })
   .then(json2 => {
       return jsonOperate2(json2)
   })
   .then(json3 => {
       return jsonOperate3(json3)
   })
   .catch(err => {
       return errOperate(err)
   })
   .then(() => {
       console.log('END')
   })

당신은 위의 코드와 같은 흐름도를 그릴 수 있습니까?(만약 안 된다면 참고 내용을 봐야 할지도 몰라...

동기화 요청 결과 순서 문제

이런 장면을 생각해 보세요. 먼저 Request 하나의pic.json, json은 하나의 수조로 항목마다 그림의 주소가 있고 그림은 순서가 있으며 그림은 순서대로 보여야 한다.당신은 논리를 어떻게 처리할 수 있습니까?모든 요청을 한꺼번에 시작하고 모든 완료 후 순서대로 보여줍니까?순서대로 그림 요청을 하고 순서대로 보여주시겠습니까?자연히 여러 개의 요청을 한꺼번에 시작합니다. 순서 목록 중 하나인 요청이 완료되면 보이기 시작합니다.그러면 구체적으로는 어떻게 조작합니까?다음 편을 보시면...
참고 내용: JavaScript Promise: 소개 | 웹 | Google Developers(추천 읽기) Promise - JavaScript | MDN Promises/A+ JavaScript Promise 미니 북