const data = fetch(`https://jsonplaceholder.typicode.com/posts`);
data
  .then((response) => {
    return response.json();
  })
  .catch((reason) => {
    console.log(reason);
  })
  .then((json) => {
    console.log(json);
  });

1. fetch()

fetch('api url')
: promise데이터타입의 response object를 반환
👉🏻 콜백함수를 인자로 받는 두개의 메서드 사용 가능함

● then()

.then(function(result)=>{})
: promise데이터타입의 처리된 결과 값을 콜백함수의 인자로 받음.

1. fetch().then()

fetch('api url').then(function(response)=>{})
: fetch가 성공할 경우 콜백함수가 호출되며 결과를 인자(result)로 받음.
👉🏻 여기서 result는 promise데이터타입의 response object를 가리킴.

2. response.json().then()

response.json().then(function(data)=>{})
: response.json()은 promise데이터타입을 객체데이터 형태로 콜백함수 인자로 받음(data)

● catch()

.catch(function(reason)=>{})
: fetch가 실패할 경우 콜백함수가 호출되며 실패 이유를 인자(result)로 받음.

● json()

response.json()
: 인자로 받은 response가 웹브라우저에게 json형태란걸 알려 promise데이터 타입으로 바꿔주고, [[PromiseResult]]슬럿에 데이터가 객체타입으로 저장함. JSON에서 이를 구문 분석하여 객체로 변환

• 📎 console.log(response.json());
  👉🏻 [[PromiseResult]]슬럿 안에 데이터가 객체타입(Array(100))으로 저장이 되어있음!!
  

• 📎 return response.json();
  👉🏻 return할 경우 객체타입 데이터가 반환이 됨!! 여기서 객체데이터를 then()의 콜백함수 인자로 들어옴~!~!
  : response.json().then((data)=>{console.log(data);});
  

● text()

response.text()
: 결과를 문자열 형식으로 제공

2. new Promise

var job1 = new Promise(function( resolve, reject ){
  // 실행할 코드들
  
  // Promise 생성 성공 시 반환될 코드를 resolve()메서드 인자에 작성
  resolve('resolved ok!'); 
  
  // Promise 생성 실패 시 반환될 코드를 reject()메서드 인자에 작성
  reject('rejected ok!'); 
});

job1.then((data)=>{
  console.log(data); // resolved ok!
}); 

● new Promise((resolve, reject)=>{})

: 콜백함수 인자로 Promise 생성 여부를 나타내는 함수값이 들어옴.
: promise데이터 타입은 then(), catch()메서드 사용 가능함.

1. 비동기 함수 사용하기

👾#01 - promise 1개 사용

function job1(){
  return new Promise(function( resolve, reject ){
    setTimeout(()=>{
      resolve('resolved ok!'); 
    }, 2000);
});

job1().then((data)=>{
  console.log(data); // resolved ok!
}); 

👉🏻 2뒤에 resolved ok! 출력

👾#02 - promise 2개 사용

function job1(){
  return new Promise(function( resolve, reject ){
    setTimeout(()=>{
      resolve('job1 ok!'); 
    }, 2000);
  });
}
function job2(){
  return new Promise(function( resolve, reject ){
    setTimeout(()=>{
      resolve('job2 ok!'); 
    }, 2000);
  });
}

👾 #02-1 : Nested 방법

job1().then((data)=>{
  console.log(data); // job1 ok!
  job2.then((data)=>{
    console.log(data); // job2 ok!
  });
}); 

👾 #02-2 : chaining 방법

job1().then((data)=>{
  console.log(data); // job1 ok!
  return job2();
}).then((data)=>{
  console.log(data); // job2 ok!
}); 

👉🏻 02-1, 02-2 모두 2초뒤 차례대로 출력 됨.

2. reject()

👾#01 - reject()만 작성

function job1(){
  return new Promise(function( resolve, reject ){
    setTimeout(()=>{
      reject('job1 fail!'); //  reject만 작성
    }, 2000);
  });
}
job1()
  .then((data)=>{console.log(data)})
  .catch((reason)=>{console.log(reason)});

👉🏻 2초뒤에 job1 fail! 출력

👾#02 - resolve(), reject() 모두 작성

function job1(){
  return new Promise(function( resolve, reject ){
    setTimeout(()=>{
      resolve('job1 ok!');
      reject('job1 fail!');
    }, 2000);
  });
}
job1()
  .then((data)=>{console.log(data)})
  .catch((reason)=>{console.log(reason)});

👉🏻 2초뒤에 job1 ok! 출력, resolve()만 실행 됨!!

👾#03 - promise 2개 사용, reject()만 작성

function job1(){
  return new Promise(function( resolve, reject ){
    setTimeout(()=>{
      reject('job1 fail!');
    }, 2000);
  });
}
function job2(){
  return new Promise(function( resolve, reject ){
    setTimeout(()=>{
      resolve('job2 ok!'); 
    }, 2000);
  });
}

job1().then((data)=>{
  console.log(data);
  return job2();
})
  .catch((reason)=>{
  console.log(reason)
})
  .then((data)=>{
  console.log(data);
}); 

👉🏻 2초뒤에 job1 fail! 출력되고 job2에 대한 resolve()는 실행되지 않음~!