자바스크립트 문법/중고급(비동기_프라미스_this)

비동기 promise, async/await (생활코딩)

자무카 2022. 10. 28.

생활코딩이 짱!

콜백 Hell --> Promise --> async / await

Promise 사용하기

// 남이 만든 promise 를 사용. (소비자)

fetched = fetch('https://jsonplaceholder.typicode.com/posts')

  .then(response=>response.json()) // response.json()은 promise리턴->.then
  .catch(reason=>console.log(reaseon)) // rejected
  .then(data=>console.log('프라미스 체이닝',data)) // 프라미스 chaining 방식

생산자. 남이 Promise 를 사용하도록 (기초)

// 매개변수에 성공,실패를 알려주는 콜백함수 필요.
// var job1 = new Promise((resolve,reject)=>resolve('resolved ok!'));
var job = new Promise(resolve=>setTimeout(()=>resolve('resolved ok!'), 2000))
job.then(data=>console.log('data', data))

Promise 공급하는 함수 만들기 ( Nested Promise & 프라미스 체이닝 )

function job1(){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>resolve('job1 ok'),2000)
  });
}
// step3 : job2 추가. 체이닝
function job2(){
  return new Promise((resolve, reject)=>{
    setTimeout(()=>resolve('job2 ok!'),2000)
  });
}
// 1) nested Promise
// job1().then(data=>{
//   console.log('data1', data);
//   //step2
//   job2().then(data=>{
//     console.log('data2', data);
//   })
// })
// 2) chaining Promise
job1()
  .then(data=>{
    console.log('data1', data);
    return job2(); // ***Promise를 리턴해서, 체이닝
  })
  .catch(reason=>{
    console.log('reason', reason); // 에러처리
    return Promise.reject(reason); // 후속 .then 실행X, 에러메세지 
  })
  .then(data=>{
    console.log('data2', data);
  })

(해설)

// 남이 만든 promise 를 사용. (소비자)
// var fetched = fetch('https://jsonplaceholder.typicode.com/posts')
// console.log(fetched) // Promise {<pending>}
fetched = fetch('https://jsonplaceholder.typicode.com/posts')
// fetched.then(response=>console.log(response));
//json 리턴: Promise객체->.then,.catch 또 사용 가능
// .then(response=>console.log(response.json().then(data=>console.log(data))))
  .then(response=>response.json()) // response.json()은 promise리턴->.then
  .catch(reason=>console.log(reaseon)) // rejected
  .then(data=>console.log('프라미스 체이닝',data)) // 프라미스 chaining 방식


console.log("promise 만들기 (생산자)")
// 매개변수에 성공,실패를 알려주는 콜백함수 필요.
// var job1 = new Promise((resolve,reject)=>resolve('resolved ok!'));
var job = new Promise(resolve=>setTimeout(()=>resolve('resolved ok!'), 2000))
job.then(data=>console.log('data', data))

// step2 : Promise 객체를 리턴하는 함수 만들기.
function job1(){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>resolve('job1 ok'),2000)
  });
}
// step3 : job2 추가. 체이닝
function job2(){
  return new Promise((resolve, reject)=>{
    setTimeout(()=>resolve('job2 ok!'),2000)
  });
}
// 1) nested Promise
// job1().then(data=>{
//   console.log('data1', data);
//   //step2
//   job2().then(data=>{
//     console.log('data2', data);
//   })
// })
// 2) chaining Promise
job1()
  .then(data=>{
    console.log('data1', data);
    return job2(); // ***Promise를 리턴해서, 체이닝
  })
  .catch(reason=>{
    console.log('reason', reason); // 에러처리
    return Promise.reject(reason); // 후속 .then 실행X, 에러메세지 
  })
  .then(data=>{
    console.log('data2', data);
  })

async / await

function timer(time){
  return new Promise(function(resolve){
    setTimeout(function(){
      resolve(time);
    }, time);
  });
}

console.log('시작');
  timer(1000).then(function(time){
    console.log('time:'+time);
    return timer(time+1000);
  }).then(function(time){
    console.log('time:'+time);
    return timer(time+1000);
  }).then(function(time){
    console.log('time:'+time);
    // return timer(time+1000);
  console.log('끝');
  });
// console.log('끝');

function timer(time){
  return new Promise(function(resolve){
    setTimeout(function(){
      resolve(time);
    }, time);
  });
}

// console.log('시작');
//   timer(1000).then(function(time){
//     console.log('time:'+time);
//     return timer(time+1000);
//   }).then(function(time){
//     console.log('time:'+time);
//     return timer(time+1000);
//   }).then(function(time){
//     console.log('time:'+time);
//     // return timer(time+1000);
//   console.log('끝');
//   });
// // console.log('끝');

async function run(){
console.log('start');
var time = await timer(1000);
console.log('time:'+time);
time = await timer(1000);
console.log('time:'+time);
time = await timer(1000);
console.log('time:'+time);
console.log('end');
}
run();