https://whales.131 나는 당신의 게시물을 읽고 내가 이해하는 것을 추가할 것입니다!
요청을 보낸 후 동기화는 응답을 받아야 다음 요청을 할 수 있습니다.
반면 async는 요청을 보낸 후 응답에 관계없이 다음 요청을 실행합니다. 이는 동시에 여러 작업을 처리할 수 있음을 의미합니다.
예시 비동기 가져오기, Axios API 요청, SetTimeout, 파일 읽기
아래는 동기/비동기의 차이를 확실히 알 수 있는 사진입니다!!
Promise와 Async를 살펴보고 비동기 코드가 처리될 때까지 기다리겠습니다.
약속하다
함수를 인자로 받고 프라미스를 하면 인자로 받은 함수(실행자 함수라고 함)도 바로 실행된다.
실행자 함수는 두 함수(Resolve, Reject)를 인수로 사용합니다.
실행 함수가 실행되면 함수 내에서 비동기 작업이 수행됩니다. 해결 함수는 성공 시 호출되고 거부 함수는 오류 시 호출됩니다.
* Promise에는 보류(불완전), 이행(이행) 및 거부(실패)의 세 가지 상태가 있습니다.
* 충족 및 거부의 조합은 완료된 것으로 간주됩니다.
// promise 객체 생성
const promise = new Promise((resolve, reject)=>{
// resolve 또는 reject 함수가 실행됨
})
promise
.then(
function (value){
// resolve가 호출되면 then이 실행(fulfilled상태)
// value에 콜백함수 결과 값이 담김
}
)
.catch(
function (err){
// reject가 호출되면 catch가 실행(rejected상태)
// err에 실패 사유가 담김
}
)
.finally(
// 콜백 작업을 마치고 무조건 실행되는 finally (생략 가능)
)
then 메서드는 약속의 이행 및 거부 상태를 모두 제어할 수 있지만 일반적으로 then의 이행 상태와 catch의 거부 상태를 제어합니다.
다음은 then 메서드 전체를 제어하는 예입니다.
// promise 객체 생성
const promise = new Promise((resolve, reject)=>{
// resolve 또는 reject 함수가 실행됨
})
promise
.then(
function (value){
//value에 콜백함수 결과 값이 담김
}
function (err){
// reject가 호출되면 실행(rejected상태)
}
)
.catch(
//reject가 호출되면 catch가 실행(rejected상태)
)
.finally(
//콜백 작업을 마치고 무조건 실행되는 finally (생략 가능)
)
async(함수) & await(키워드)
비동기 코드를 동기식으로 표현하는 간단한 방법입니다.
Promise와 달리 결과 값은 then 또는 catch로 처리되지 않고 변수에 저장됩니다. (=> 동기 코드처럼 작성할 수 있음)
대기 및 비동기는 파트너입니다. await는 비동기 함수 내에서만 작동합니다.
Async는 함수 앞에 배치되고 await는 HTTP를 사용하여 통신하는 비동기 처리 코드 앞에 배치됩니다.
대기가 의도한 대로 작동하려면 비동기 처리 코드(axios 또는 가져오기와 같은 API 호출 함수 O)가 Promise 객체를 반환해야 합니다.
* Promise가 아닌 모든 것은 해결된 상태의 Promise에 래핑되므로 해결된 Promise가 반환됩니다.
const promise = function () {
return new Promise((resolve, reject) => {
// 비동기 처리 코드이지만 promise를 반환하지 않기 때문에 promise의 resolve(이행)함수로 감싼 것!
setTimeout(() => resolve("Done!!"), 2000);
});
};
async function asyncTest() {
const result = await promise(); // promise가 이행될 때까지 기다렸다가,
console.log(result); // 완료 되면 하단의 코드가 이어서 실행됨
}
asyncTest()
async 및 await의 예외는 try 및 catch 문을 사용합니다.
* 약속의 경우 .catch{} / async&await의 경우 catch{}
const promise = function () {
return new Promise((resolve, reject) => {
// 비동기 처리 코드이지만 promise를 반환하지 않기 때문에 promise의 resolve(이행)함수로 감싼 것!
setTimeout(() => resolve("Done!!"), 2000);
});
};
async function asyncTest() {
try{
const result = await promise(); // promise가 이행될 때까지 기다렸다가,
console.log("result", result); //성공 시 result 값 출력
}
catch(e){
console.log("error", e) // 예외 시 에러 값 출력
}
}
asyncTest()