1. promise
promise 는 자바스크립트 비동기 처리에 사용되는 객체로, 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다.
resolve와 reject는 각각 무엇일까?
promise를 통해 new Promise()로 프로미스를 생성한다고 가정하자.
여기서 new Promise에 전달되는 함수는 executor(실행자, 실행 함수) 라고 부른다.
executor은 new Promise가 만들어질 때 자동적으로 실행된다.
즉, resolve와 reject는 executer의 인수이자, 자바스크립트에서 자체 제공하는 콜백이다.
1) resolve(value)
: 일이 성공적으로 끝난경우, 그 결과를 나타내는 value와 함께 호출한다.
2) reject(error)
: 에러 발생 시 에러 객체를 나타내는 error와 함께 호출된다.
excutor는 상황에 따라 인수로 넘겨준 resolve와 reject 중 하나를 반드시 호출해야 한다.
=> 따라서 excutor는 promise의 상태를 둘 중 하나로 변화시킨다.
async와 await
async
async는 함수 앞에 위치하고, 함수앞에 붙이면 -> 해당 함수는 항상 프로미스를 반환한다.
지어 프라미스가 아닌 값을 반환한다 하더라도, 이행 상태의 프라미스로 값을 감싸 => 이행된 프라미스가 반환되도록 한다.
즉, async가 붙은 함수는 반드시 프로미스를 반환하고, 프로미스가 아닌 것은 프로미스로 감싸 반환한다.
await
await키워드는 async 함수 안에서만 동작한다.
1) 자바스크립트는 await 키워드를 만나면 프라미스가 동작할 때까지 기다린 후, 그 후 결과가 반환된다.
2) 만약 await 키워드 다음으로 추가 동작이 있다면,await 키워드가 작성된 코드가 동작 후 -> 다음 순서의 코드가 동작한다.
await의 주의점
- async함수가 아닌 일반 함수에선 사용할 수 없다(문법에러 발생)
- await는 최상위 레벨 코드에선 작동하지 않는다.
-> 하지만 익명 async함수로 감사면 최상위 레벨 코드에서도 await 사용가능하다.
await의 장점
- 자바스크립트가 비동기적으로 작동하므로 -> cpu 리소스가 낭비되지 않고
- await 키워드를 사용하면 promises.then보다 가독성이 좋고 사용하기 편리하다.
