Javascript_ Promise()



Javascript_ Promise()

  • Producer
  • // !!when new Promise is created, the executor runs automatically!!
    // doing some heavy work! (network, read files)
    // promise 가 만들어지는 순간 resolve가 바로 실행됨. (비동기)
    const promise = new Promise((resolve, reject) => {
      console.log("doing something...");
      setTimeout(() => {
        resolve("kim");
        reject(new Error("no network")); 
    //reject는 promise실패 시 불러오는 함수. 보통 Error라는 오브젝트를 통해 값을 전달함
      }, 1000);
    });
  • Consumers: then, catch, finally
  • もしあなたの約束がうまく実現されたら.その後((((値)=>{})valueが承諾解析パラメータである
    承諾が実現しない場合はcatchを実行します.catch(((エラー)=<{})errorは、上に作成した新しいErrorです.
    .finallyは成功しても失敗しても、最後は無条件に行います.
    .then().catch()の構造は配列である.array.array 2と同じ
    promise
      .then((value) => {
        console.log(value);
      })
      .catch((error) => {
        console.log(error);
      })
      .finally(() => {
        console.log("finally");
      });
  • Promise chaining
    -> .そして順番に使う
    ->arrayシーケンス運転の感覚
  • 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));
    4 Error Handling
    一度、二度、三度
    const getHen = () =>
      new Promise((resolve, reject) => {
        setTimeout(() => resolve(``), 1000);
      });
    
    
    const getEgg = (hen) =>
      new Promise((resolve, reject) => {
        setTimeout(() => reject(new Error(`${hen}`)), 1000);
      }); 
    // 해당 부분에서 오류 발생했다고 가정..
    
    const cook = (egg) =>
      new Promise((resolve, reject) => {
        setTimeout(() => resolve(`${egg}`), 1000);
      });
    
    getHen()
      .then((hen) => getEgg(hen)) //
      .then((egg) => cook(egg))
      .then((meal) => console.log(meal))
      .catch(console.log); 
    // .catch를 마지막에 붙이면 중간에 발생한 오류의 정보를 아래로 보내서 오류가 어디서 발생했는지 알 수 있음
    //上と下は同じコードです.
    //.そして(getegg)とその後(hen)=>getEGG(hen)となり、別の関数を直接呼び出すと省略できます(1つの値のみ)
     getHen()
    	.then(getEgg)
        .catch((error) => {  //이렇게 중간에 .catch를 넣어주고 return value를 입력해주면 해당 위치에서 error가 나면 원래 값이 아닌 return 값을 전달해줌.
         return `오류가 났네..`; //오류가 났네 라는 값을 대신 전달해줘서 잘 마무리
      })
        .then(cook)
    	.then(console.log)