[JavaScript] Promise/ fetch / then / catch / async await

Promise

:자바스크립트 비동기 처리에 사용되는 객체

 

Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.

• 대기(pending): 이행하지도, 거부하지도 않은 초기 상태.
• 이행(fulfilled): 연산이 성공적으로 완료됨.
• 거부(rejected): 연산이 실패함.

 

Promise를 공부해보자

 

fetch로 json파일을 불러오면

let fetched = fetch("https://jsonplaceholder.typicode.com/posts");
console.log(fetched)

// Promise{...}

fetch는 Promise 객체를 반환한다 

 

promise는 두 개의 메서드를 사용할 수 있는데 then과 catch이다. 둘 다 콜백 함수를 받는다.

 

.then

fetch를 통해서 실행한 결과가 성공했을 때 then으로 전달된 콜백 함수가 호출된다.
그 콜백함수가 호출되면서 결과값이 있다면 첫 번째 파라미터로 받을 수 있다.

fetched.then((result)=>{});

 

.catch

fetch를 통해서 실행한 결과가 실패한다면 catch 안으로 전달된 콜백함수가 호출된다.

파라미터로 이유를 알려준다. 

fetched.catch((reason)=>{});

 

 

 

그래서 데이터를 받아오는 공식처럼 사용되는 아래 코드를 보면 

이전까지는 그냥 외우다시피 하면서 썼었는데 이번에 promise에 대해 공부하면서 

이제 더 이해가 되는 것 같다 

fetch('http://example.com/movies.json')
  .then((response) => response.json())   // response.json() => 아직 promise상태
  .then((data) => console.log(data));

 

 async / await

 

async

async는 function 앞에 위치하는데 async가 붙은 함수는 반드시 promise를 반환하고,

promise가 아닌 것은 프라미스로 감싸 반환한다.

 

Const a = async () => {}

 

await 

 

자바스크립트는 await 키워드를 만나면 프라미스가 처리될 때까지 기다린다.
Promise.then으로 프로미스를 벗겨서 promise 안의 값을 꺼내올 수 있다. 
데이터를 받아오는 용도가 아니다

예시)   모던 JavaScript 튜토리얼을 참고하였음.

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f();

async 함수가 아닌데 await을 사용하면 문법 에러가 발생한다.

 

 

비동기 프로그래밍을 하는 방식
callback, promise-then, async/await

 

 

---

연습용으로 사용하기 좋은 json 파일  제공해주는 사이트

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API