소개

Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 개체입니다. 약속은 함수에 콜백을 전달하는 대신 콜백을 첨부하는 반환된 객체입니다.

새로운 약속

새로운 Promise를 만들려면 new Promise를 작성해야 하고 함수인 두 개의 인수가 있는 함수를 전달해야 합니다. 첫 번째는 이 약속의 결의를 나타내고 두 번째는 이 약속의 거부를 나타냅니다.

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

이제 다른 URL로 함수를 여러 번 호출하려면 then 메서드를 사용해야 합니다. then 메서드는 비동기 요청이 반환되면 데이터를 반환합니다. 그러나 작업이 실패하면 catch 메서드를 사용해야 합니다. 다음과 같이 표시되어야 합니다.

requestPromise('reddit.com/api/chicken/page1')
    .then(() => {
        console.log('PAGE1 WORKED!!');
        requestPromise('reddit.com/api/chicken/page2')
            .then(() => {
                console.log('PAGE2 WORKED!!');
                requestPromise('reddit.com/api/chicken/page3')
                    .then(() => {
                        console.log('PAGE3 WORKED!!');
                    })
                    .catch(() => {
                        console.log('PAGE3 ERROR!!');
                    })
                    .catch(() => {
                        console.log('PAGE2 ERROR!!');
                    })
            })
            .catch(() => {
                console.log('PAGE1 ERROR!!');
            })
    })  

보시다시피 이것은 매우 길고 반복적입니다. 하나만 사용하면 더 짧고 깔끔하게 만들 수 있습니다catch. 이것이 작동하려면 콜백 내에서 약속을 반환해야 합니다.

requestPromise('reddit.com/api/chicken/page1')
    .then(() => {
      console.log('PAGE1 WORKED!!');
      return requestPromise('reddit.com/api/chicken/page2')
    })
    .then(() => {
    console.log('PAGE2 WORKED!!');
    return requestPromise('reddit.com/api/chicken/page3')
    })
    .then(() => {
        console.log('PAGE3 WORKED!!');
    })
    .catch(() => {
        console.log('REQUEST FAILED!');
    })

Promises are resolved and rejected with values.

requestPromise('reddit.com/api/chicken/page1')
    .then((data) => {
      console.log('PAGE1 WORKED!!');
        console.log(data);           
      return requestPromise('reddit.com/api/chicken/page2')
    })
    .catch((err) => {
        console.log('REQUEST FAILED!');
        console.log(err);
    })


// IF IT WORKS IT WILL PRINT:
// PAGE 1 WORKED!!
// Here is your fake data from reddit.com/api/chicken/page1

// IF IT DOESN'T WORK:
// REQUEST FAILED!
// Connection Timeout :(

이것은 함수에서 오는 것입니다.

비동기 함수

비동기 코드 작업을 위한 새롭고 깔끔한 구문입니다! 여전히 약속과 같은 말이지만 "더 예쁘다". 당신이 알아야 할 두 가지 키워드가 있습니다.

비동기 키워드

1. 비동기 함수는 항상 약속을 반환합니다.


2. 함수가 값을 반환하는 경우. 그 가치로 그 약속이 해결됩니다.


3. 함수에서 예외가 발생하면 약속이 거부됩니다.

async function hello(){   
}
//-> returns a promise even if empty


const sing = async () => {  
}
// -> we can use async arrow functions

여기 몇 가지 예가 있어요.

const login = async (username, password) => {
    if(!username || !password) 
    throw 'Missing Credentials'
    if(password === 'password') 
    return 'Welcome!'
    throw 'Invalid Password'
}

login('demonslayer64')
    .then(msg => {
        console.log('LOGGED IN!')
        console.log(msg)
    })
    .catch(err => {
        console.log('ERROR!')
        console.log(err)
    })

//Returns:
ERROR!
Missing Credentials

login('demonslayer64', 'slayerdemon46')
    .then(msg => {
        console.log('LOGGED IN!')
        console.log(msg)
    })
    .catch(err => {
        console.log('ERROR!')
        console.log(err)
    })

//Returns:
ERROR!
Invalid Password

login('demonslayer64', 'password')
    .then(msg => {
        console.log('LOGGED IN!')
        console.log(msg)
    })
    .catch(err => {
        console.log('ERROR!')
        console.log(err)
    })

//Returns:
LOGGED IN!
WELCOME!

키워드를 기다리다

1. await 키워드는 async로 선언된 함수 내부에서 사용됩니다.


2. await 함수 실행을 일시 중지하고 약속이 해결될 때까지 기다립니다.

다음은 이전 함수의 예입니다.

async function makeTwoRequests() {
    let data1 = await requestPromise('/page1');
    console.log(data1);
}

//Returns
<- >Promise {<pending>}
Here is your fake data from /page1

결론

이것은 JavaScript Promise의 거의 기본입니다. 이것이 도움이 되었는지 알려주십시오. 모든 피드백은 크게 감사하겠습니다!