[vue3] 동기? 비동기? promise

// function a(callback){
//   setTimeout(()=>{
//     console.log('A')
//     callback()
//   },1000)
// }
// function b(callback){
//   setTimeout(()=>{
//     console.log('B')
//     callback()
//   },1000)
// }
// function c(callback){
//   setTimeout(()=>{
//     console.log('C')
//     callback()
//   },1000)
// }
// function d(callback){
//   setTimeout(()=>{
//     console.log('D')
//     callback()
//   },1000)
// }
// a(function (){
//   b(function(){
//     c(function(){
//       d(function(){
//         console.log('D')
//       })
//     })
//   })
// })
//먼저 쓴 코드가 먼저 출력 되는것을 '동기 방식' 이라고 한다
// callback 함수 : 뒤에서 호출한다
// 실행 순서 보장
// 내용 많아지면 코드지옥!
// -> Promise 객체 사용으로 해결


function a(){
  // promise: 약속의 객체
  return new Promise(function(resolve){
    setTimeout(function(){
      console.log('A')
      resolve('hello A')
    },1000)
  })
}
function b(){
  // promise: 약속의 객체
  return new Promise(function(resolve){
    setTimeout(function(){
      console.log('B')
      resolve('hello B')
    },1000)
  })
}
function c(){
  // promise: 약속의 객체
  return new Promise(function(resolve){
    setTimeout(function(){
      console.log('C')
      resolve('hello C')
    },1000)
  })
}
function d(){
  // promise: 약속의 객체
  return new Promise(function(resolve){
    setTimeout(function(){
      console.log('D')
      resolve('hello D')
    },1000)
  })
}
async function test(){
  const h1 = await a()
  const h2 = await b()
  const h3 = await c()
  const h4 = await d()
  console.log('Done!')
  console.log(h1, h2, h3, h4)
}
//test()
// function b(){
//   console.log('B')
// }
// async function test(){
//   const res = await a()   //resolve() 까지 기다린다
//   console.log('res: ' , res)
//   b()
// }

// test()


// https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise
// then
// catch
// finally

function x(){
  return new Promise((resolve) => {
    setTimeout(() =>{
      console.log('X')
      resolve()
    },1000)
  })
}

function tst(){
  // x().then(()=>
  //  console.log('Y')
  // )

  // a().then(()=>{
  //   b().then(()=> {
  //     c().then(()=>{
  //       d().then(()=>{
  //         console.log('Done@')
  //       })
  //     })
  //   })
  // })

  // a().then(()=>{
  //   return b()
  // }).then(()=>{
  //   return c()
  // }).then(()=>{
  //   return d()
  // }).then(()=>{
  //   console.log('Done!')
  // })

  a()
  .then(() => b())
  .then(() => c())
  .then(() => d())
  .then(() => {
    console.log('Done')
  })
}
//tst()


// catch!

function aa(number){
  return new Promise((resolve, reject) => {
    if( number > 4) {
      reject()  // 거부
      return 
    }
    setTimeout(() =>{
      console.log('aa')
      resolve()
    },1000)
  })
}

async function test_aa(){
  // aa(5)
  //   .then(()=>{   //resolve를 만나면 실행
  //     console.log('Resolve')
  //   })
  //   .catch(()=>{    //reject 만나면 실행
  //     console.log('Reject!')
  //   })
  //   .finally(()=>{  //resolve를 만나던 reject 를 만나던 실행되는 부분
  //     console.log('Done')
  //   })

  try {         // error가 발생할수있는 부분을 try 에 추가
    await aa(5)
    console.log('resolve')
  } catch(e) {  //error가 발생 했을시 동작
    console.log('Reject')
  } finally{    // 마지막에 무조건 실행되는부분
    console.log('Done')
  }

}
test_aa()

 

 

//// axios cdn

// 대기 - 이행하거나 거부되지 않은 초기 상태
// 이행 - 연산이 성공적으로 완료됨
// 거부 - 연산이 실패함

function fetchMovie(title){
  // 대기 - 이행하거나 거부되지 않은 초기 상태
  const OMBD_API_KEY = '7035c60c'
  return new Promise( async (resolve, reject)=>{
    try{
      const res = await axios.get(`https://omdbapi.com?apikey=${OMBD_API_KEY}&s=${title}`)
      // console.log(res.data)
      // 이행 - 연산이 성공적으로 완료됨
      resolve(res)
    } catch (e) {
      console.log(e.message)
      // 거부 - 연산이 실패함
      reject("잘못된 정보")
    } 
  })
}

async function test(){
  try {
    const res = await fetchMovie('Harry')
    console.log(res)
  } catch (e) {
    console.log(e)
  }
}
test()

function hello(){
  fetchMovie('jobs')
  .then(res => console.log(res))
  .catch(e => { console.log(e) })
}

hello()