[Javascript] Promise; 프로미스

프로미스?
어떤 연산. 비동기 연산이 최종적으로 완료 혹은 성공했는지 실패했는지 알려주는 객체
요청을 보내 다른위치에서 데이터를 받을 때 주로 사용 (IMDB API, Nexflix API 등..)

시간이 오래걸리거나 접속이 안될 때, 접근권한이 없거나 URL을 잘못쓰거나 API 또는 인터넷이 다운됐을때 등등 여러가지 상황에서 실패할 수 있는데, 그럴 때 자주 사용한다.

프로미스의 상태

pending: 대기
resolved: 성공
rejected: 실패

resolved, rejected에 따라 다른 기능을 수행하게된다.

const fakeRequestPromise = (url) => {
  return new Promise((resolve, reject) => {
    const delay = Math.floor(Math.random() * 4500) + 500;
    setTimeout(() => {
      if (delay > 4000) {
        reject("Connect Timeout");
      } else {
        resolve(`Here is your fake data from ${url}`);
      }
    }, delay);
  });
};

const request = fakeRequestPromise("book.com");
request
  .then(() => {
    console.log("IT WORKED!!!!");
    fakeRequestPromise("book.com/page2")
      .then(() => {
        console.log("IT WORKED!!! 2");
        fakeRequestPromise("book.com/page3")
          .then(() => {
            console.log("IT WORKED!!! 3");
          })
          .catch(() => {
            console.log("OH NO ERROR 3!!!");
          });
      })
      .catch(() => {
        console.log("OH NO ERROR 2!!!");
      });
  })
  .catch(() => {
    console.log("OH, NO! ERROR!!!");
  });

현재는 요청이 중첩되는 상태로 프로미스 사용이 콜백함수와 크게 다르지 않다고 생각할 수도 있다.

fakeRequestPromise("book.com/page")
  .then(() => {
    console.log("IT WORKED !!!! ");
    return fakeRequestPromise("book.com/page2");
  })
  .then(() => {
    console.log("IT WORKED !!!! ");
    return fakeRequestPromise("book.com/page3");
  })
  .then(() => {
    console.log("IT WORKED !!!! ");
    return fakeRequestPromise("book.com/page4");
  })
  .catch(() => {
    console.log("OH NO, A REQUEST FAILED!!! ");
  });

이런식으로 순차실행을 밖으로 뺄 수 있기 때문이다.
첫 Promise가 resolve일경우 그 다음 실행, 중간에 reject가 되면 catch를 실행한다.

이번에는 데이터를 넣어서 함수에서 데이터까지 출력해보자

fakeRequestPromise("book.com/page")
  .then((data) => {
    console.log("IT WORKED !!!! ");
    console.log(data);
    return fakeRequestPromise("book.com/page2");
  })
  .then((data) => {
    console.log("IT WORKED !!!! ");
    console.log(data);
    return fakeRequestPromise("book.com/page3");
  })
  .then((data) => {
    console.log("IT WORKED !!!! ");
    console.log(data);
    return fakeRequestPromise("book.com/page4");
  })
  .catch(() => {
    console.log("OH NO, A REQUEST FAILED!!! ");
  });

프로미스를 반환한 함수에 있던 데이터까지 Promise 체인을 사용해 성공, 실패에 따른 상태값을 출력했다.

---

프로미스 만들기

new Promise안에 성공, 실패 함수를 담는다. 첫번째 매개변수는 resolve, 두번째 매개변수는 reject다.

const fakeRequest = (url) => {
  return new Promise((resolve, reject) => {
    const randomNumber = Math.random();
    setTimeout(() => {
      if (randomNumber < 0.7) {
        resolve("YOUR FAKE DATA HERE");
      }
      reject("Request Error");
    }, 1000);
  });
};

fakeRequest("/dogs/1")
  .then((data) => {
    console.log("DONE WITH REQUEST", data);
  })
  .catch((err) => {
    console.log("OH NO ERROR! ", err);
  });

---

const delayedColorChange = (newColor, delay, doNext) => {
  setTimeout(() => {
    document.body.style.backgroundColor = newColor;
    doNext && doNext();
  }, delay);
};

delayedColorChange("olive", 1000, () => {
  delayedColorChange("orange", 1000, () => {
    delayedColorChange("magenta", 1000, () => {
      delayedColorChange("steelblue", 1000, () => {
        delayedColorChange("white", 1000, () => {});
      });
    });
  });
});

프로미스함수를 알기전에 만들었던 콜백지옥을 프로미스로 바꿔보자

const delayedColorChange = (color, delay) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      document.body.style.backgroundColor = color;
      resolve();
    }, delay);
  });
};

delayedColorChange("red", 1500)
  .then(() => delayedColorChange("orange", 1500))
  .then(() => delayedColorChange("yellow", 1500))
  .then(() => delayedColorChange("green", 1500))
  .then(() => delayedColorChange("blue", 1500))
  .then(() => delayedColorChange("navy", 1500))
  .then(() => delayedColorChange("violet", 1500))
  .then(() => delayedColorChange("pink", 1500));

참고:
- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise
- Udemy Colt