[인간 JS 되기] promise, async/await

promise

const condition = true; //true이면 resolve, false면 reject
const promise = new Promise((resolve, reject)=>{
    if(condition){
        resolve('성공');
    }else{
        reject('실패');
    }
});

//다른 코드가 들어갈 수 있음
promise.then((message)=>{
    console.log(message); //성공(resolve)한 경우 실행
}).catch((error)=>{
    console.log(error); //실패(reject)한 경우 실행
})

 

📌promise : 내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체

Then을 붙이면 결과를 반환함

실행이 완료되지 않았으면 완료된 후에 Then 내부 함수가 실행됨

 

📌Resolve(성공 리턴값) -> then으로 연결

📌Reject(실패 리턴값) -> catch로 연결

📌Finally 부분은 무조건 실행됨

 

프로미스라는 것은 어떤 동작을 하는 것이다 ex) 어떤 파일을 읽어와, 네이버에 요청을 한번 보내고 와

하지만 이런 요청은 항상 성공하는게 아니라 실패할 수가 있다(비동기는 실패할 염두를 둬야한다)

 

성공하면 resolve 호출, 실패하면 reject 호출 

resolve 호출하면 then으로, reject 호출하면 catch로 간다

항상 어떤 동작을 했을 때 그 동작이 성공/실패 하기 때문에 두 개로 나누는 것

실패를 했는데 resolve를 호출하면 프로미스는 then 으로 간다 resolve /reject 는 코드 짤 때 개발자가 잘 구별해줘야 한다

 

const promise = setTimeoutPromise(3000);

console.log('딴짓');
console.log('딴짓');
console.log('딴짓');
console.log('딴짓');

promise.then(()=>{
    지금할래
});

 

분리해서 사용할 수 있는것과 없는 것은 차이가 있다

콜백이면 코드가 지저분해 질 수 있으나 프로미스를 사용하면 실행을 해놓고 나중에 필요할 때 꺼내쓸 수 있다

 

 

 

 

콜백패턴(3중첩)을 프로미스로 바꾸는 예제

 

callback패턴

function findAndSaveUser(User){
    User.findOne({}, (err, user)=>{ //첫번째 콜백
        if(err){
            return console.error(err);
        }
        user.name = 'zero';
        user.save((err)=>{ //두번째 콜백
            if(err){
                return console.error(err);
            }
            User.findOne({gender : 'm'}, (err, user)=>{ //세번째 콜백
                //생략
            });
        });
    });
}

 

 

프로미스 패턴

function findAndSaveUser(Users){
    Users.findOne({})
    .then((user)=>{
        user.name='zero';
        return user.save();
    })
    .then((user)=>{
        return Users.findOne({gender : 'm'});
    })
    .then((user)=>{
        //생략
    })
    .catch(err=>{
        
    })
}

 

 

Promise.resolve(성공리턴값) : 바로 resolve하는 프로미스

Promise.reject(실패리턴값) : 바로 reject하는 프로미스

const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2');

Promise.all([promise1, promise2])
    .then((result)=>{
        console.log(result); // ['성공1', '성공2'];
    })
    .catch((error)=>{
        console.error(error);
    });

 

Promise.all(배열) : 여러개의 프로미스를 동시에 진행

-하나라도 실패하면 catch로 감

-allSettled로 실패한 것만 추려낼 수 있음

 

 

---

 

 

📌Async/await으로 한 번 더 축약 가능

//기존의 프로미스
function findAndSaveUser(Users){
    Users.findOne({})
        .then((user)=>{
            user.name = 'zero';
            return user.save();
        })
        .then((user)=>{
            return Users.findOne({gender : 'm'});
        })
        .then((user)=>{
            //생략
        })
}

 

await function으로 바꾸기

 

async function의 도입

변수 = await 프로미스; 인 경우 프로미스가 resolve된 값이 변수에 저장

변수 await 값; 인 경우 그 값이 변수에 저장

 

 

async function findAndSaveUser(Users){
    let user = await Users.findOne({}); //이 때 await이 then 역할을 한다고 보면 됨
    user.name = 'zero';
    user = await user.save();
    user = await Users.findOne({gender : 'm'});
    //생략
}

 

 let user = await Users.findOne({});

3)결과값 2)then 1)프로미스

await을 사용하면 오른쪽에서 왼쪽으로 간다는 것만 주의할 것

await을 사용할 땐 항상 async 함수가 붙어야 함