본문 바로가기

Lecture

Promise 객체 이해하기

이렇게 생긴 코드에서 텍스트 'take me out'을 빼야함

 

function please() {
    return new Promise((resolve, reject) => {
        resolve(takeMeOut());
    })
}

function takeMeOut(){
    const pr = new Promise((resolve, reject) => {
        resolve('take me out');
    });

    const obj = {
        text: function(){
            return pr;
        }
    };
    return obj;
};

 

두가지 방식으로 꺼낼 수 있다.

 

 

A - then사용

 

 

1. please함수안에 takeMeOut 함수를 뺀다.

 

let result = please()
    .then(function(data){console.log(data)})

 

 

2. takeMeOut의 return 값인 obj에서 pr을 뺀다.

 

 

2-1. obj안의 text 함수를 작동 시킨다

 

let result = please()
    .then(function(data){console.log(data.text())})

 

 

2-2 그 text함수의 결과값을 받는다.

 

let result = please()
    .then(function(data){console.log(data.text()
        .then(function(data2){console.log(data2)}
        ))}
    );

 

 

 

 

B - async/await 사용

 

 

1. please함수의 결과값을 await로 함수가 '끝난뒤' 받는다

 

async function newResult(){
    let response = await please();
}

 

1-1. 여기 response 값을 console로 찍어 보았다.

 

async function newResult(){
    let response = await please();
    console.log(response);
}

 

 

객체 안에 text에 function:text가 담겨있는게 보인다.

 

 

1-2. response안에 text값으로 접근해 console을 찍어봤다.

 

async function newResult(){
    let response = await please();
    console.log(response.text);
}

 

 

text에서 빠져나와 function:text가 남았다.

 

 

2. 함수를 불러온다.

 

async function newResult(){
    let response = await please();
    console.log(response.text());
}

 

 

작성되어 있던 text함수가 작동되면서 return값으로 pr값을 promise 객체로써 받아왔다.

 

 

 

3. 받아온 객체를 await로 빼준다.

 

async function newResult(){
    let response = await please();
    let text = await response.text();
    return text
}

 

 

 

 

== 코드의 형태를 잘 모르겠다면 console로 전부 찍어보면서 확인해보기!

'Lecture' 카테고리의 다른 글

React 함수  (0) 2021.07.02
React 기본 사용  (0) 2021.07.02
Cookie 이해하기  (0) 2021.05.27
TOKEN 암호화  (1) 2021.05.27
비동기 통신 로딩 처리  (0) 2021.05.27