jsNote 11:Promise Promise


1. Promise


JSに内蔵されたobject は、
  • callbackの代わりに非同期処理を簡素化
  • が正常に動作している場合は、成功メッセージと結果値、またはエラーが渡されます.
  • ≪ステータス|Status|emdw≫:プロセスが機能を実行しているかどうか(保留中)、機能が完了しているかどうか(完了または拒否されている)のステータスを知ることが重要です.
  • 2)データを提供する人(生産者)と、提供/消費する人(消費者)の違いを明確にしなければならない.
  • 2. Producer

    const promise = new Promise((resolve, reject) => {
        console.log('doing something...');
        setTimeout(() => {
            //resolve('emma'); 
            //성공 시, 성공적으로 네트워크에서 받아온 resolve라는 함수를 통해 'emma' 값을 전달
            reject(new Error('no network')); //에러 시, 무슨 에러가 발생했는지 잘 명시할 것
        }, 2000)
    })
  • dateを受信した場合(コードの「doing someting部分」)、次のコードは行われないためpromiseを用いて非同期処理を行う.
  • 'doing something...'これが出力結果であり,promiseが生成された瞬間にexecutor関数が直ちに実行される(ネットワーク通信を実行する)ことがわかる.
  • ユーザが何らかの動作を行う際にネットワーク要求を行う必要がある場合は、以上の事実に注意してコードを記述してください.
  • 3. Consumer


    次にcatch,finallyを用いて値をとる.
    promise
    .then((value) => {
        console.log(value);
    }) //promise가 잘 수행되었다면 resolve에서 전달한 값이 value에 들어옴
    .catch(error => {
        console.log(error);
    })
    .finally(() => {console.log('finally')}); 
    //성공하든 실패하든 어떤 기능을 마지막으로 수행하고 싶을 때 쓰고싶은 함수

    4. Promise chaining


    その後、
  • は非同期処理
  • を統合する.
  • それから直接振り替えることができて、また車に戻って振り替えることができます.
  • const fetchNumber = new Promise((resolve, reject) => {
        setTimeout(() => resolve(1), 1000);
    });
    
    fetchNumber
    .then(num => num*2)
    .then(num => num*3)
    .then(num => {
        return new Promise((resolve, reject) => {
            setTimeout(() => resolve(num-1), 1000);
        });
    })
    .then(num => console.log(num)); //5 

    5. Error handling

    const getHen = () =>
        new Promise((resolve, reject) => {
            setTimeout(() => resolve('🐓'), 1000);
        }); //암탉을 받아오는 Promise는 1초 후에 🐓 리턴
    const getEgg = hen =>
        new Promise((resolve, reject) => {
            setTimeout(() => resolve(`${hen} => 🥚`), 1000);
            setTimeout(() => reject(new Error(`error! ${hen} => 🥚`)), 1000);
        }); //hen을 받아오는 Promise는 1초 후에 🥚 리턴
    const cook = egg => 
        new Promise((resolve, reject) => {
            setTimeout(() => resolve(`${egg} => 🍳`), 1000);
        }); //egg를 받아오는 Promise는 1초 후에 🍳 리턴 
    
    getHen() //getHen을 받아오면
    .then(hen => getEgg(hen)) //전달받은 닭을 이용해서 getEgg 호출
    .then(egg => cook(egg)) //계란이 받아지면 요리하는 cook 호출
    .then(meal => console.log(meal)); //🐓 => 🥚 => 🍳
    
    //then에서 받아오는 value를 다른 함수로 바로 호출하는 경우에는 생략가능. 아래처럼 표현 가능
    
    getHen()
    .then(getEgg)
    .catch(error => {
        return '🍟';
    }) //전달된 에러를 🍟로 대체해서 전체적인 체인에 문제가 되지 않게 처리
    .then(cook) 
    .then(console.log); //🐓 => 🥚 => 🍳