promise, async, await 공부하기

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

자바스크립트 비동기 처리와 콜백 함수

ajax 를 사용할 때, url에서 정보를 받아오고, 변수에 정보를 할당한 후에 console.log로 찍으려고 하는데 undefined가 뜬다. 이거 왜이럴까? 두 함수가 동시에 실행되었기 때문이다. console.log 함수는 ajax가 실행된 후에 실행되어야할 필요가 있다. 이렇게 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이 비동기 처리이다. 이걸 어떻게 처리할까?

 

콜백 function을 쓴다. 콜백 function을 쓰면, url로부터 밭은 데이터를  response로 넣고, 그게 callbackFunc자리에 들어가야, console.log 가 실행이 될 수 있으니, 비동기 실행으로 인해 발생한 문제가 해결된다.

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/#promise%EA%B0%80-%EB%AD%94%EA%B0%80%EC%9A%94

자바스크립트 Promise 쉽게 이해하기

 

promise 는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다고 한다.

new Promise() 함수로 내장함수인 Promise를 가져오고, resolve(), then(), catch()들이 Promise API에 포함된다.

프로미스의 상태 (states)에는 3가지가 있다. 

Pending(대기) - 비동기 처리 아직 미완료

Fulfilled(이행) - 비동기 처리 완료, 결과값 반환

Rejected(실패) - 비동기 처리 실패 or 오류 발생

 

https://joshua1988.github.io/web-development/javascript/js-async-await/

자바스크립트 async와 await

 

Async 의 syntax

    async function name([param[, param[, ... param]]]) {
        statements
    }

 

(이해 전혀 안됐음)

---

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%B2%98%EB%A6%AC-Promise

📚 자바스크립트 Promise 개념 & 문법 정복하기

 

비동기 처리 : 현재 실행 중 작업과 별도로 다른 작업을 수행하는 것.

비동기는 특정 코드의 실행이 끝날 때까지 기다리지 않고 다음 코드를 먼저 수행한다. 때문에 어떤 작업의 결과에 따라 다른 작업을 수행해야 할 때는 콜백함수를 쓴다.

 

콜콜백함수는, 비동기 작업이 완료되는 호출되는 함수의 의미로, 비동기 함수의 매개변수로 함수 객체를 넘기는 기법이다.

하지만 여러개의 비동기 작업을 순차적으로 수행해야하면 콜백지옥에 빠진다.

function increaseAndPrint(n, callback) {
  setTimeout(() => {
    const increased = n + 1;
    console.log(increased);
    if (callback) {
      callback(increased); // 콜백함수 호출
    }
  }, 1000);
}

increaseAndPrint(0, n => {
  increaseAndPrint(n, n => {
    increaseAndPrint(n, n => {
      increaseAndPrint(n, n => {
        increaseAndPrint(n, n => {
          console.log('끝!');
        });
      });
    });
  });
});

 

이렇게. 애로우코드라고 한다나 뭐라나? 이것과 같은 코드가 아래의 코드다.

function increaseAndPrint(n) {
  return new Promise((resolve, reject)=>{
    setTimeout(() => {
      const increased = n + 1;
      console.log(increased);
      resolve(increased);
    }, 1000)
  })
}

increaseAndPrint(0)
  .then((n) => increaseAndPrint(n))
  .then((n) => increaseAndPrint(n))
  .then((n) => increaseAndPrint(n))
  .then((n) => increaseAndPrint(n)); // 체이닝 기법

 

 Js의 Promise 객체는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체이다. 약속을 반환하기에 Promise.

 

Promise 객체를 생성하려면 new 키워드와 Promise 생성자 함수를 사용하면된다. Promise 생성자 안에는 두개의 매개변수를 가진 콜백함수를 넣는다.

 

첫번째 인수는 성공(resolve)를 알려주는 객체

두번째 인수는 실패(reject)를 알려주는 오류 객체이다.

 

작업이 성공하면 비동기 로직 실행이 참이라는 걸 알려주기 위해 resolve()메소드를 호출. 실패하면 reject() 호출.

 

비동기 작업이 완료된 후에는 .then()과 .catch() 메소드 체이닝을 통해 성공/실패에 대한 후속 처리를 진행할 수 있다.

처리가 성공하면 .then()으로 이어지고, 실패하면 .catch() 로 이어져 추가 처리를 진행한다.

myPromise
    .then((value) => { // 성공적으로 수행했을 때 실행될 코드
    	console.log("Data: ", value); // 위에서 return resolve(data)의 data값이 출력된다
    })
    .catch((error) => { // 실패했을 때 실행될 코드
     	console.error(error); // 위에서 return reject("Error")의 "Error"가 출력된다
    })
    .finally(() => { // 성공하든 실패하든 무조건 실행될 코드
    	
    })

 

위와 같이 프로미스 객체를 변수에 바로 할당할 수 도 있지만, 

// 프로미스 객체를 반환하는 함수 생성
function myPromise() {
  return new Promise((resolve, reject) => {
    if (/* 성공 조건 */) {
      resolve(/* 결과 값 */);
    } else {
      reject(/* 에러 값 */);
    }
  });
}

// 프로미스 객체를 반환하는 함수 사용
myPromise()
    .then((result) => {
      // 성공 시 실행할 콜백 함수
    })
    .catch((error) => {
      // 실패 시 실행할 콜백 함수
    });

이렇게 Promise를 반환하는 함수를 만들어서 사용한다고 한다.

이러면 재사용성, 확장성, 가독성이 올라간다고한다.

 

프로미스는

Pending(대기) - resolve가 실행되기 전

Fulfilled(이행) - resolve가 실행된 후

Rejected(거부) - reject()가 실행된 후

의 세가지 상태가 있다. state.

 

프로미스 핸들러

프로미스의 성공/실패 결과를 .then .catch .finally 핸들러를 통해 받고, 후속 작업을 수행한다. 

then은 fulfilled 상태가 되면 실행할 콜백함수 등록하는 메소드

catch는 reject 상태가 ''

finally는 무조건 실행할 콜백함수 등록하는 메서드

 

---

async await 문법

async function f() { return 1;}
//처럼, function 앞에 async를 붙이면 해당 함수는 항상 프로미스를 반환한다.

async function f() { return 1;}
f().then(arlert);
//요렇게 쓰면 result가 1인 프로미스가 반환된다고 한다.

async가 붙은 함수는 반드시 프로미스를 반환하고, 프로미스가 아닌 것은 프로미스로 감싸 반환한다.

또한 await는 async 함수 안에서만 동작한다. 

 

let value = await promise

await 키워드를 만나면 프로미스가 처리될 때까지 기다린다. 

 

async function f() {

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

let result = await promise;
alert(result);
}

f();

 

위의 예제에서, 프로미스가 처리 될 때까지 f()의 함수가 잠시 일시중지된다.