JAVASCRIPT - 중급 10편

* 동기/비동기처리

- 동기식처리(Synchronous)

한번에 코드 한줄씩 차례로 실행

오래걸리는 연산을 만나면 멈춤

순차적으로 실행시키기 위해서 콜백함수 사용

function fun1(fun2) {
  console.log(1);
  fun2();
}
function fun2() {
  console.log(2);
}
fun1(fun2);

문제점

1. 전통적인 콜백 패턴은 콜백헬로 인해 가독성이 나쁨

2.에러의 처리가 곤란하며 여러개의 비동기 처리를 한번에 처리하는 데도 한계

해결방안

Promise 사용

---

- 비동기식처리(Asynchronous)

오래걸리는 작업이 있으면 다른 코드 먼저 실행

자바스크립트는 브라우저에서 실행하기 때문에 Web API를 사용하여 비동기식처리 가능

예시

setTimeout(() => { }, 1000);
eventListener('click',() => { });
$.ajax();
// 등등 Web API와 연관도니 특수한 함수들 사용

* Promise

성공과 실패를 판별해서 상황에 맞는 코드 실행

콜뱀함수 디자인의 대체품

var pro = new Promise((resolve, reject) => {
  var sum = 1 + 1;
  sum === 2 ? resolve(sum) : reject(sum);
}); // 성공 / 실패 판정 기계
pro
  .then((number) => {
  console.log(`resolve : 값은 ${number}`);
}) // 성공했을때 실행
  .catch((number) => {
  console.log(`reject : 값은 ${number}`);
}) // 실패했을때 실행
//---------------------------------------------
  .finally((number) => {
  console.log(`연산한 값은 : ${number} 입니다`)
}) // 성공,실패 여부 상관 없이 실행

Promise Status

1. 대기(pending): 이행하지도, 거부하지도 않은 초기 상태

2. 이행(fulfilled): 연산 성공적 완료

3. 거부(rejected): 연산 실패

대기는 이행 || 거부 상태로 변경이 가능하지만, 이행은 대기 || 거부 상태로 변경이 불가능 하다

---

예시

1. 이미지 로드 성공 여부 판별

var pro = new Promise((fulfill, reject) => {
    var img = document.getElementById('test');
    img.addEventListener('load', () => {
        fulfill();
    }) // 이미지 로딩 성공시
    img.addEventListener('error', () => {
        reject();
    }) // 이미지 로딩 실패시
})
pro.then(() => {
    console.log('이미지 로드 성공');
}).catch(() => {
    console.log('이미지 로드 실패');
})

2. Ajax 요청 성공 여부 판별

var pro = new Promise((fulfill, reject) => {
    $.ajax({
        type: 'GET',
        url: 'https://codingapple1.github.io/hello.txt',
    }).done((result) => {
        fulfill(result);
    }).fail(() => {
        reject();
    });
  //위에 코드와 동일, GET방식으로 ajax 요청
  // $.get('URL 경로').done(function(결과){ console.log(결과) });
});
pro.then((result) => {
    console.log(`로딩 성공 : ${result}`);
}).catch(() => {
    console.log('로딩 실패');
});

3. Promise Chaining

var pro = new Promise(function(fulfill, jecet) {
  $.get('https://codingapple1.github.io/hello.txt').done(function(result){
      fulfill(result)
    });
});
pro.then(function(result) {
  console.log(result); // result: '안녕하세요 반갑습니다요.'
  var pro2 = new Promise(function(fulfill, jecet) { $.get('https://codingapple1.github.io/hello2.txt').done(function(result){
      fulfill(result)
    })
  });
  return pro2;
}).then(function(result) {
    console.log(result); // result: '두번째 인삿말입니다'
});

* async, await, try & catch

- async: promise 대체 가능

함수 앞에 붙이면 함수 실행 후에 Promise Object가 남는다

단. 이행 조건만 가능

async function sum(num1,num2) {
  	num1 = Number(num1);
    num2 = Number(num2);
    if(!isNaN(num1) && !isNaN(num2)) {
        return num1 + num2
    }
    return Promise.reject('숫자가 아닙니다.');
};
sum(1,2).then((result) => {
    console.log(result);
})

---

- await: promise 실패시 에러나고 중단

async함수 내에서만 사용 가능

async 내에 promise가 실행될때 까지 대기

promise가 실행되면 실행

async function sum(num1,num2) {
    var pro = new Promise((fulfill, reject) => {
      if(!isNaN(num1) && !isNaN(num2)) {
        var sumResult = num1 + num2;
        fulfill(sumResult);
      } else {
        reject();
    });
    var result = await pro;
    console.log(result);
}
sum(1,10);

---

- try & catch

실패됬을 때 중단하지 않고 실행시키는 방법

try { 이 코드 시도해보고 } catch { 안되면 이 코드 실행 }

async function sum(num1,num2) {
    num1 = Number(num1);
    num2 = Number(num2);
    var pro = new Promise((fulfill, reject) => {
        if(!isNaN(num1) && !isNaN(num2)) {
            var sumResult = num1 + num2;
            fulfill(sumResult);
        } else {
            reject();
        }
    });
    try {
        var result = await pro;
        console.log(`Promise 연산 성공: ${result}`);
    } catch {
        console.log('Promise 연산 실패');
    };
}
sum(1,'1'); // result: "Promise 연산 성공: 2"
sum(1,2); // result: "Promise 연산 성공: 3"
sum(1,'r'); // result: "Promise 연산 실패"

버튼 클릭 시 Promise 성공 여부 판별

var pro = new Promise((fulfill, reject) => {
        var btn = document.getElementById('btn');
        btn.addEventListener('click',() => {
            fulfill('Promise 연산 성공');
    })        
})
async function btnClick() {
    try {
        var result = await pro;
        console.log(result);
    } catch {   
        console.log('Promise 연산 실패');
    }
}
btnClick();