[js]Promise, async와 await, fetch로 다루는 json

java script 에서 비동기를 동기적으로 시행하기 위해선  Promise를 써주면 좋다.

회원 인증 같이 서버와 통신해서 인증을 받을 때에는 인증이 먼저, 그 다음 정보 내려주는 순차가 중요해서...

주로 서버랑 통신할 때에 프로미스를 쓴다고 보면 됨. 오류 방지용으로...

 

프로미스 함수식은 new Promise(function(resolve, reject){ }) 이런 식으로 이루어진다. 

Promise, 즉 '약속' 은 resolve받다 와 reject거절하다 로 나뉜다.

단, {}안에는 reject나 resolve 중의 하나 조건만 넣을 수 있음. 

 

const myPromise = new Promise(function (resolve, reject) {
//resolve("약속 지켰다");
setTimeout(function () {
reject("오늘은 별로야 다음에 와");
}, 3000);
//reject("약속 거절했다");
reject resolve둘 중에 먼저 실행하는 하나만 쓸 수 있음.
});

그리고 아래와 같이 Promise로 만들어진 함수는 .then과 .catch .finally 를 쓸 수 있다.

제대로 받았을 때, 에러가 났을 때, promise의 결과와 관련 없이 강제로 실행-주로 로딩바에 사용-이 있다. 

myPromise
.then(function (result) {
console.log(result);
})
.catch(function (error) {
console.log(error);
})
//   .finally(function () {
//주로 로딩바
console.log("연락이라도 해줘...");
});

 

 

또, promise는 다음과 같이 세 가지 상태를 가질 수 있다.

1) pending: 대기. 아직 처리되지 않음.

2) fullfilled: 이행, 성공적으로 처리 완료

3) rejected: 처리 실패

이 세 가지는 콘솔 창에서 자주 보게 되니까 알아둘 것!

 

 

---

await / async ?

callback과 promise의 단점, 즉 꼬리에 꼬리를 물며 이어지는 콜백 지옥에 대한 해결안으로 나온 최근의 함수다. 비동기 코드가 동기 코드처럼 읽히게 쉽게 만듬. 

여기서 특징, await 은 async 안에서만 동작한다. 

 

promise만 쓸 때, 다음과 같은 상황이 발생한다. 처리는 되지만 가독성이 hell이 된다.

function work(sec, callback) {
  setTimeout(function () {
    callback(new Date().toISOString());
  }, sec);
}
work(1000, function (result) {
  console.log("첫번째 작업", result);
  work(1000, function (result) {
    console.log("두번째 작업", result);
    work(1000, function (result) {
      console.log("세번째 작업", result);
    });
  });
});

이걸 해결하기 위해 아래처럼 쓰면 같은 결과를 도출하는 코드가 보기 좋게 나온다.

 

function workPromise(sec) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve(new Date().toISOString());
    }, sec);
  });
}
workPromise(1000)
  .then(function (result) {
    console.log("첫번째 작업", result);
    return workPromise(1000);
  })
  .then(function (result) {
    console.log("두번째 작업", result);
    return workPromise(3000);
  })
  .then(function (result) {
    console.log("세번째 작업", result);
  });

 

아래는 ajax가 아니라 fetch로 json파일 받아오면서 만든 거..... async랑 await를 쓰는 중. await를 걸어두면 이게 다 시행된 뒤에야 다음 거가 시행됨. promise랑 달리 async는 try - catch()문으로 에러를 잡아낸다고 하는데 아직 이건 잘 모르겠음. 

async function kakaoSearch(query, category) {
  try {
    const response = await fetch(`http://dapi.kakao.com/v2/search/${category}?query=${query}`, {
      headers: {
        Authorization: "KakaoAK 8f00c1038910f84cda109542af76e423",
      },
    });
    console.log(response);
    const json = response.json(); // json()
    return json;
  } catch (error) {
    return error;
  }
}

 

 

 

 

 

아래는 기타 자질구레한 오늘 배운 거... 

• vscode에서 ctrl 누르고 함수 클릭하면 코드 뜯어볼 수 있음.
• 화살표 함수를 많이 쓰는데 아직 제대로 마스터 못 한 듯...어려움.; 
• https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

오늘 써본 사이트... 가짜 json서버 사이트라나

fancy box는 이미지 크게 보여주는 라이브러리.