비동기(Asynchronous)

비동기는 자바스크립트 엔진이 기다리지 않고 다음 코드를 실행하는 것이다.(한번에 한줄씩 만 실행할 수 있다. web API를 사용해서 브라우저에게 일을 맡기고 브라우저가 됐다고 알려주면 콜스택에 올려서 일처리를 한다. )undefined를 반환하면서 의도한대로 프로그램이 실행되지 않는다. 이를 보완하기 위해서 콜백함수를 쓰고 이를 보완하기 위해서 promise, 특히 서버와 통신할 때도 기다리지 않고 다음 코드를 실행해버리는 것을 방지위한 async await fetch, axios가 있다.

• ) 이건 한국말이 헷갈리기 때문에 이상하게 느껴지지만 동기 (Synchronize)에 비(A)가 붙은 것을 처리해주라는 뜻이다. 그러니깐 그냥 동시에 안되는 것, 이 것이 자바스크립트 엔진의 특징인데 그 걸 어떻게 처리해 줄건지? 라고 이해하였다.

Promise 사용 예시

**(선언)**
const fakeRequest = (url) => {
return new Promise((resolve,reject)=>{
 const random=math.random();
 setTimeout(()=> 
 if (random<0.7){
     resolve('YOUR FAKE DATA');
 }
 reject('Error');
 },1000)
 })
 }
 
 
 **(호출)**
 fakeRequest('/cats/1')
   .then((data)=>{
   console.log('success' , data )
   })
   .catch((err)=>{
   console.log('fail', err)
   })
 

new Promise의 매개변수 resolve, reject는 (콜백)함수이며 각각의 리턴값이 resolve의 매개변수인 data, reject의 매개변수인 err로 받아지는 것이다.

async / await
async: new Promise를 내포하고 있다.
그 말은 즉슨 함수가 값이 반환될 때
resolve될 것인지 reject 될 것인지 나뉘어진다. 예를 들자면,

const sing = async ()=>{ 
throw "error"
return "LALALALA" }

sing()
.then((data)=>{console.log ("resoleved", data)})
.catch((err)=>{console.log(err)})

//error(를 반환하게 된다.)  

await: async 함수가 값을 리턴할 때 까지 기다린다.
.then(()=>{})의 줄임체이다.
말하자면 async 함수가 resolve 함수를 실행해서 값을 반환하면
await 이하를
실행하여라 라고 할 수 있겠다.

오류처리: 오류처리는 try{}/catch(e){}로 해줄 수 있다.

async function request(){
try{
  let data = await fakeRequest('/page1);
  console.log(data)
} catch (e){
console.log("error is", e)
}
}