async/await

목차

1. async

2. await

3. async/await

asynchronous programming

1. Ajax call return data

2. webcam access request

3. image processing

프로미스에 대해서 더 알고 싶다면 Click 하세요.

WE GET IT

PROMISE ARE GREAT

PROMISE IS FOREVER

      // callback
      moveTo(50, 50, function() {
        moveTo(20, 100, function() {
          moveTo(100, 200, function() {
            moveTo(2, 10, function() {});
          });
        });
      });

      // Promise
      moveTo(50, 50)
        .then(() => moveTo(20, 100))
        .then(() => moveTo(100, 200))
        .then(() => moveTo(2, 10));

      // async/await
      async function animate() {
        await moveTo(50, 50);
        await moveTo(20, 100);
        await moveTo(100, 200);
        await moveTo(2, 10);
      }

async

      function yesno(params) {
        return axios("https://yesno.wtf/api");
      }

      async function qustion() {
        try {
          var qustion = await yesno("이번 발표가 성공할까요");
          console.log(qustion.data.answer);
          document.body.innerText = qustion.data.answer;
        } catch (error) {
          console.error(error);
        }
      }

      qustion();
      function myFunction() {
        return "myFunction";
      }
      async function myAsync() {
        return "myAsync";
      }

      console.log(myFunction());
      console.log(myAsync());

async 요약

  • async 키워드는 ES2017(ES8)
  • 함수 앞에 async를 넣는 것으로 만들수 있음
  • async 함수는 promise를 반환한다.
  • async 함수의 안에서는 동기적인 메소드가 아니여도 동기적으로 쓸 수 있다.

async Reject?

      async function myAsyncReject() {
        throw "myAsyncReject";
      }

      myAsyncReject().catch(error => {
        console.error(error);
      });

      async function myAsyncReject2() {
        await Promise.reject(new Error("myAsyncReject2"));
      }

      myAsyncReject2().catch(error => {
        console.error(error);
      });

await

      function myAwait() {
          await "myAwait"
      }
      myAwait();

await 요약

  • async 함수 안에서만 유효하다.
  • await는 async 함수의 실행을 잠시 멈추고 Promise를 해결하기를 기다린 다음 async 함수를 다시 시작함
  • 일시 정지 버튼

1. 오류 처리

const makeRequest = () => {
  return callAPromise()
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => {
      throw new Error("oops");
    })
}

makeRequest()
  .catch(err => {
    console.log(err);
    // output
    // Error: oops at callAPromise.then.then.then.then.then (index.js:8:13)
  })

const makeRequest = async () => {
  await callAPromise()
  await callAPromise()
  await callAPromise()
  await callAPromise()
  await callAPromise()
  throw new Error("oops");
}

makeRequest()
  .catch(err => {
    console.log(err);
    // output
    // Error: oops at makeRequest (index.js:7:9)
  })

2. 분기처리

const makeRequest = () => {
  return getJSON()
    .then(data => {
      if (data.needsAnotherRequest) {
        return makeAnotherRequest(data)
          .then(moreData => {
            console.log(moreData)
            return moreData
          })
      } else {
        console.log(data)
        return data
      }
    })
}
const makeRequest = async () => {
  const data = await getJSON()
  if (data.needsAnotherRequest) {
    const moreData = await makeAnotherRequest(data);
    console.log(moreData)
    return moreData
  } else {
    console.log(data)
    return data    
  }
}

3. 스택프레임

function loadData() {
  return callAPromise()
    .then(callback1)
    .then(callback2)
    .then(callback3)
    .then(() => {
      throw new Error("boom");
    })
}
loadData()
  .catch(function(e) {
    console.log(err);
// Error: boom at callAPromise.then.then.then.then (index.js:8:13)
});
async function loadData() {
  await callAPromise1()
  await callAPromise2()
  await callAPromise3()
  await callAPromise4()
  await callAPromise5()
  throw new Error("boom");
}
loadData()
  .catch(function(e) {
    console.log(err);
    // output
    // Error: boom at loadData (index.js:7:9)
});
Made with Slides.com