Promise

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

• 정해진 기간의 기능을 수행하고 정상적으로 기능이 수행되면,
• 성공의 메시지와 결과값을 전달하고 기능을 수행하다가
• 예상치못한 결과가 생겼다면 error를 전달해준다.
• 콜백 함수로, new Promise를 만들어주면 바로 실행된다.

요소

state(상태)

promise가 수행 중이면 pending
promise가 수행이 종료되면 fullfilled
promise가 수행 중 오류가 발생하면 reject

프로듀서

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

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

컨슈머

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

<script>
    //프로미스 프로듀서
    let promise = new Promise((resolve, reject) => {
        console.log("수행 중 .....");
        setTimeout(() => {
            reject("error");
        },2000)
    });
    //프로미스 컨슈머
    //성공하면 실행시키는 .then
    promise.then
      ((result) =>
        console.log("수행중...")
      ),// .then의 첫번째 함수는 결과를 다룬다.
      function(error){
        console.log(error)
      }
    // .then의 두번째 함수는 에러를 다룬다.
    //에러가 나지 않는 구문이기 때문에 "수행중..."이 출력된다.
    })
    // 에러가 나면 실행시키는 .catch
    }).catch(error => {
        console.log(error);
    })
    // 마지막에 무조건 한번 실행시키는 .finally
    .finally(() => {
        console.log("끝났어요");
    })
    // 가장 마지막에 쓰인 구문이지만 Promise를 이용하였기 때문에 "수행중..."이하에 작성된다.
    console.log("마지막에 쓰인 글자입니다.");
</script>

Promise 예시

<script>
  function getDataPromise(){
      //프로미스 생성
      return new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest(); //XMLHttpRequest 객체 생성
          //http 메소드와 path 정의
          xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1");
          //header 값 중 content-type을 정의
          xhr.setRequestHeader("content-type","application/json");
          //요청 전송
          xhr.send();
          //xhr.addEventListener("load",function(){})
          xhr.onload = () => {
              if(xhr.status === 200){
                  //응답 데이터
                  const res = JSON.parse(xhr.response);
                  resolve(res);
              }else {
                  console.error(xhr.status, xhr.statusText);
                  reject(new Error(xhr.status));
              }
          };
      });
  }
  getDataPromise().then((res)=>{
      console.log(res);
  }).catch((error) => {
      console.error(error);
  }).finally(() => {
      console.log("끝났어요");
  })
  console.log("이게비동기예요")
</script>

---

async / await

promise를 더 편하게 사용할 수 있게 해준다.

✔ async / await 조금 더 공부해서 내용 더 채우기

async : 비동기 실행을 의미한다.
await : 비동기를 실행해서 결과가 올 때까지 기다린다는 것을 의미

<script>
    // async function getName(){
    //     return Promise.reject(new Error("error..."));
    // }
    // getName().then(res=>{
    //     console.log(res);
    // }).catch(res=>{
    //     console.log(res);
    // })
    function getName(name){
        return new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve(name);
            },1000)
        })
    }
    // getName("green").then(res=>{
    //     console.log(res);
    // })
    async function showName(){
        const result = await getName("green");
        // await을 붙이면 then 필요없이 기다렸다가 저장을 한다.
      	// await은 async가 붙은 함수 안에서만 사용할 수 있다.
    }
</script>

---

async

async function myFun(){
}

promise를 반환한다.

<script>
async function getName(){	//async가 없으면 green을 출력하고 async가 있으면 Promise 값을 출력한다.
return "green";
}
console.log(getName());
</script>

---

await

async function myFun(){
  let green = 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와 동일한 출력을 하게 만들 수 있다.

---