스터디16일차 1 - 비동기 async await

278. 비동기 키워드 async await
const sing = async () => {
    throw "problem"
    return 'return value'
}
오류가 없으면 promise 상태는 resolved가 뜨면서 retrun의 값을 반환하고
오류가 있으면 promise 상태는 rejectec가 뜨면서 에러가 발생합니다.
sing() 
    .then(data => {
        console.log("resolved", data) // promise 상태가 resolved면 .then()을 실행합니다.
    })
    .catch(err => {
        console.log("rejected", err) // promise 상태가 rejected면 .catch()를 실행합니다.
    })

---

좀 더 와닿는 예시로 로그인 함수를 만들어봅시다.
const login = async( id, password ) => { // 로그인에 async를 쓰는 이유는 실제로 로그인을 할 때는 서버와의 통신을 기다려야 하기 때문입니다.
    if (!id || !password) throw "id 또는 password를 입력해주세요." // id또는 password가 입력되지 않다면 실행합니다.
    if (password === '1234') return "로그인 되었습니다." // password가 1234라면 실행합니다.
    throw "비밀번호가 일치하지 않습니다." // 그렇지 않다면 실행합니다.
    
login('young', '1234')
    .then(msg => {
        console.log("성공.", msg) // 아이디를 입력했고, 비밀번호가 1234라면 return을 반환하고 >>> promise상태가 resolve가 되어 .then()이 실행됩니다. // "성공." "로그인 되었습니다."가 출력됩니다.
    })
    .catch(err => {
        console.log("실패.", err) // 아이디 또는 비밀번호를 입력하지 않거나, 비밀번호가 1234가 아니라면 >>> promise상태가 rejected가 되어 .catch()가 실행됩니다. // "실패." "id 또는 password를 입력해주세요." 또는 "실패." "비밀번호가 일치하지 않습니다."가 출력됩니다.
        
        
        

279. await 비동기 함수 실행 대기시키기 : promise 값의 반환을 기다립니다.
await는 promise가 값을 반환할 때까지 기다리도록 비동기 함수의 실행을 일시정지 시킵니다.

.then()을 대신해서 await를 사용한다고 보면 됩니다.
async function rainbow() {
    await delayedColorChange('red', 1000) 
    await delayedColorChange('orange', 1000)) 
    await delayedColorChange('yellow', 1000)) 
    await delayedColorChange('green', 1000))

이전에 쓴 .then() 코드와 비교하면 가독성이 좋아졌습니다.
delayedColorChange('red', 1000)    
    .then(() => delayedColorChange('orange', 1000))     
    .then(() => delayedColorChange('yellow', 1000)) 
    .then(() => delayedColorChange('green', 1000))

return을 마지막으로 주고 .then()을 실행해봅니다.
async function rainbow() {
    await delayedColorChange('red', 1000) 
    await delayedColorChange('orange', 1000)
    await delayedColorChange('yellow', 1000)
    await delayedColorChange('green', 1000)
    return "끝남"
    
rainbow().then((result) => console.log(result + "RAINBOW FINISHED")) // await 함수의 실행이 순서대로 다 끝나고 4초가 지나서 "끝남RAINBOW FINISHED"가 출력됩니다.

async function printRainbow() {
    await rainbow();
    console.log("끝나고 출력됨")
}
printRainbow() // 색깔이 다 바뀌고 나서 "끝나고 출력됨" 이 출력됩니다.

 

변수에 await를 실행한 값(return)을 저장할 수 있습니다.
async function makeTwoRequests() {
    let data1 = await fakeRequest('/ppap1');
    console.log(data1);
}

 

280. 비동기 함수가 rejected 되었을 때 오류 처리하기
async function twoRea() {
    try {
        let data1 = await fakeReq("/p1");
        console.log(data1); // fakeReq("/p1")가 resolved 된 경우 return값을 출력합니다.
        let data2 = await fakeReq("/p2"); // 바로 위의 fakeReq코드의 결과를 기다린 뒤에 실행됩니다.
        console.log(data2); // fakeReq("/p2"); 가 resolved 된 경우 return값을 출력합니다.
    } catch (e) {
        console.log("에러")
        console.log("에러는 :", e) // "에러는 :"과 e에는 rejected된 return값을 출력합니다.
    }
}