Promise

비동기를 간편하게 처리할 수 있도록 도와주는 Object

• 정해진 기간의 기능을 수행한 뒤

  • 정상적인 결과: 결과값 전달
  • 예상치못한 결과: error를 전달

• 콜백 함수로, new Promise를 만들어주면 바로 실행된다.

요소

state(상태)

• promise가 수행중: pending
• promise가 수행완료: fullfilled
• 오류 발생: reject

프로듀서

프로미스를 만들어서 제공하는 쪽

// 프로미스 프로듀서
    let promise= new Promise((resolve, reject)=>{
      if(성공){ resolve(data);} //
      else{ reject(error);} //
    });

컨슈머

프로미스의 결과를 사용하는 쪽

// 프로미스 컨슈머
	//성공하면 실행시키는 .then
    promise.then
	  ((result)=>
      	console.log("수행중...")
      ),// .then의 첫번째 함수는 결과를 다룬다.
	  function(error){
      	console.log(error)
      } // .then의 두번째 함수는 에러를 다룬다.
      //에러가 나지 않는 구문이기 때문에 "수행중..."이 출력된다.
    })
    //에러가 나면 실행시키는 .catch
    .catch(error=>{
      console.log(error);
    })
	// 마지막에 무조건 한번 실행시키는 .finally
    .finally(()=>{ 
      console.log("end");
    });

//가장 마지막에 쓰인 구문이지만 Promise를 이용하였기 때문에 "수행중..."이하에 작성된다.
    console.log("마지막에 쓰인 글자입니다.");

결과값(아래에서는, 2000ms후에 완료되게 지정했다.)

async

async function myFun(){
}

promise를 반환한다.

await

async function myFun(){
  let v= await fetch("URL")
}

await 이하의 작업이 완료될 때까지 기다린 뒤에 변수에 값을 넣는다.
❗ await는 async가 없으면 사용할 수 없다.

응용

async function myFatch(){
	let promise = new Promise((resolve,reject)=>{
    	setTimeout(()=>resolve("완료"),1000)
    })
    let result= await promise;
    //👉result에 담기는 값은 "완료"이다.
    //👉promise 변수가 이행 완료 될 때까지 기다린다. 
}

Fetch

async function myFun(){
      const res= await fetch("http://jsonplaceholder.typicode.com/posts/1");
      const resjson= await res.json();
      console.log(resjson);
    }
    myFun();

fetch와 동일한 출력을 하게 만들 수 있다.

try-catch

async function myFun(){
      try{
		//❗ 이 영역에서 실행한 구문이 문제가 생긴다면
      }
  	  catch(e){
        //❗ 이곳에서 error를 처리한다.
      }
    }