티스토리 뷰

웹개발(프론트)

Promise

수달찌 2021. 3. 28. 14:57

목차

     

     

    async / wait 함수에 대하여 자세하게 다룰 예정이었는데,

    구글링 하다 보니 promise에 대하여 다루다가 본제로 넘어갈 것 같아서

    그냥 promise를 먼저 다루기로 했다.

    Promise

    Promise란 비동기 작업의 결과를 나타내는 object이다.

    비동기란 간단하게 말하면, 작업을 요청한 뒤 응답이 올 때까지 다음 코드를 진행하는 방식을 뜻한다.

     

    promise는 요청에 대한 응답으로써,

    두 가지로 구성되어있다.

    상태

    상태에는 세 가지가 있다.

    • Pending(대기) : 작업이 완료되지 않았을 때, 진행중일때
    • Fulfilled(이행) : 작업이 완료되어 응답을 했을 때
    • Rejected(실패) : 작업을 실패하였을 때

    mdn이미지

    그림을 살펴보면 대기상태에서 작업이 처리(settled) 됐을 때, 성공과 실패로 나뉘고 이를 promise 형태로 반환한다.

    결괏값

    function getPromise() {
      return myFirstPromise;
    }
    
    let myFirstPromise = new Promise((resolve, reject) => {
      resolve("Success!");
    });
    
    myFirstPromise.then((successMessage) => {
      console.log("Success! " + successMessage);
    })
    .catch((reason) => {
      console.log("Error.." + reason);
    });

     

    후.. 진액으로 압축했다 후후

    getPromise 함수는 

    myFirstPromise라는 promise를 반환한다.

     

    myFirstPromise는 "Success!"라는 데이터를 반환하며,

    이 작업이 성공 시 .then이 호출되며,

    작업이 실패할 시.catch가 호출된다.

     

    .then 앞에는 promise명을 붙이고,

    catch 앞에는 붙이지 않은 이유는

    코드가 Promise.then(). catch()로 이어진 상태로 인식하기에 생략이 가능하다.

    '웹개발(프론트)' 카테고리의 다른 글

    가상셀렉터로 icon 만들기  (0) 2021.03.30
    async / await  (0) 2021.03.29
    가상셀렉터  (0) 2021.03.26
    타이머기능  (0) 2021.03.23
    eventlistener  (0) 2021.03.20
    댓글
    최근에 올라온 글
    최근에 달린 댓글
    Total
    Today
    Yesterday
    링크
    «   2024/05   »
    1 2 3 4
    5 6 7 8 9 10 11
    12 13 14 15 16 17 18
    19 20 21 22 23 24 25
    26 27 28 29 30 31
    글 보관함