Asynchronous_Javascript.md

Asynchronous JavaScript(비동기 자바스크립트)

🔗 JavaScript Promises와 JavaScript Async / Await을 보고 정리한 내용입니다.

1. Promise

• 콜백 방식과 비슷하지만, then과 catch를 사용하여 더 간결하게 표현할 수 있다.

letp=newPromise((resolve,reject)=>{leta=1+1;if(a===2){// resolveresolve("Success");}else{// rejectreject("Failed");}})// resolvep.then((message)=>{console.log("This is in the then "+message);// reject}).catch((message)=>{console.log("This in in the catch "+message);})// This is in the then Success

• 비동기 데이터 처리와 같이 백그라운드에서 시간이 걸리는 작업에 Promise를 사용할 수 있다.
  • Promise는 계속 중첩되는 콜백 방식의 단점(콜백 지옥)을 해결할 수 있다.

1️⃣ Callback

constuserLeft=false;constuserWatchingOtherChannel=false;functionwatchTutorialCallback(callback,errorCallback){if(userLeft){errorCallback({name: "User Left -",message: "🙁"})}elseif(userWatchingOtherChannel){errorCallback({name: "userWatchingOtherChannel -",message: "myChannel < otherChannel"})}else{callback("Thumbs up and Subscribe")}}watchTutorialCallback((message)=>{// 첫번째 콜백(성공)console.log("Success: "+message)},(error)=>{// 두번째 콜백(에러)console.log("Error: "+error.name+" "+error.message)})

2️⃣ Promise

constuserLeft=false;constuserWatchingOtherChannel=false;functionwatchTutorialPromise(){returnnewPromise((resolve,reject)=>{if(userLeft){reject({name: "User Left -",message: "🙁"})}elseif(userWatchingOtherChannel){reject({name: "userWatchingOtherChannel -",message: "myChannel < otherChannel"})}else{resolve("Thumbs up and Subscribe")}})}watchTutorialPromise().then((message)=>{// resolveconsole.log("Success: ")returnmessage}).then((message)=>{console.log(message+" 😀")}).catch((error)=>{// rejectconsole.log("Error: "+error.name+" "+error.message)})

Promise 이용하기

• 항상 resolve 하는 다수의 Promise의 경우

1. Promise.all: 모든 Promise가 완료된 후 호출

constrecordVideoOne=newPromise((resolve,reject)=>{resolve("Video 1 Recorded")})constrecordVideoTwo=newPromise((resolve,reject)=>{resolve("Video 2 Recorded")})constrecordVideoThree=newPromise((resolve,reject)=>{resolve("Video 3 Recorded")})Promise.all([recordVideoOne,recordVideoTwo,recordVideoThree]).then((messages)=>{console.log(messages)// 모든 배열 형태로 메세지 출력})// ["Video 1 Recorded", "Video 2 Recorded", "Video 3 Recorded"]

2. Promise.race: 첫번째 Promise가 완료되자마자 호출

constrecordVideoOne=newPromise((resolve,reject)=>{resolve("Video 1 Recorded")})constrecordVideoTwo=newPromise((resolve,reject)=>{resolve("Video 2 Recorded")})constrecordVideoThree=newPromise((resolve,reject)=>{resolve("Video 3 Recorded")})Promise.race([// 첫번째 요소인 recordVideoOne이 완료되면 호출recordVideoOne,recordVideoTwo,recordVideoThree]).then((message)=>{console.log(message)// 하나의 메세지 출력})// Video 1 Recorded

---

2. Async/ Await

Async/ Await은 Promise를 더 편리하게(동기적으로) 사용하기 위해 만들어진 문법적인 설탕

1️⃣ Promise

functionmakeRequest(location){returnnewPromise((resolve,reject)=>{console.log(`Making Request to ${location}`)if(location==="Google"){resolve("Google says hi")}else{reject("We can only talk to Google")}})}functionprocessRequest(response){returnnewPromise((resolve,reject)=>{console.log("Processing response")resolve(`Extra Information + ${response}`)})}constLOCATION="Google";// const LOCATION = "Facebook";makeRequest(LOCATION).then(response=>{console.log("Response Received")// console.log(response) // Google says hireturnprocessRequest(response)}).then(processResponse=>{console.log(processResponse)}).catch(error=>{console.log(error)})/* resolveMaking Request to GoogleResponse ReceivedProcessing responseExtra Information + Google says hi*//* rejectMaking Request to FacebookWe can only talk to Google*/

2️⃣ Async/ Await

🔑 Async/ Await 유의점

1. 항상 코드를 함수로 감싸고 함수 앞에 async 키워드를 추가한다.
2. 비동기 코드 앞에 await 키워드 사용하여 Promise의 결과를 반환한다.

functionmakeRequest(location){returnnewPromise((resolve,reject)=>{console.log(`Making Request to ${location}`)if(location==="Google"){resolve("Google says hi")}else{reject("We can only talk to Google")}})}functionprocessRequest(response){returnnewPromise((resolve,reject)=>{console.log("Processing response")resolve(`Extra Information + ${response}`)})}// const LOCATION = "Google"; constLOCATION="Facebook";asyncfunctiondoWork(){try{constresponse=awaitmakeRequest(LOCATION)// Google says hiconsole.log("Response Received")constprocessResponse=awaitprocessRequest(response)console.log(processResponse)}catch(error){console.log(error)}}doWork()/* resolveMaking Request to GoogleResponse ReceivedProcessing responseExtra Information + Google says hi*//* rejectMaking Request to FacebookWe can only talk to Google*/