콜백지옥의 예시!(코드흐름을 잘 파악할 것!)

function parseValueDone(id) {
	auth(id, authDone); // auth(id)의 결과값이 authDone의 매개변수인 result로 사용되는 방식
}
function authDone(result) { // authDone을 통해 들어온 result로 display(result) 실행
	display(result, displayDone); 
}
function displayDone(text) {
	console.log(text);
}
$.get('url', function(response) {
	parseValue(response, parseValueDone);
});

*** 오류처리 관련해서 아래처럼 왜 가능한 catch를 써야하는지 아직 이해가 안됨!! ***

// then()의 두 번째 인자로는 감지하지 못하는 오류function getData() {
  return new Promise(function(resolve, reject) {
    resolve('hi');
  });
}

getData().then(function(result) {
  console.log(result);
  throw new Error("Error in then()");// Uncaught (in promise) Error: Error in then()}, function(err) {
  console.log('then error : ', err);
});

getData() 함수의 프로미스에서 resolve() 메서드를 호출하여 정상적으로 로직을 처리했지만, then()의 첫 번째 콜백 함수 내부에서 오류가 나는 경우 오류를 제대로 잡아내지 못합니다. 따라서 코드를 실행하면 아래와 같은 오류가 납니다.

하지만 똑같은 오류를 catch()로 처리하면 다른 결과가 나옵니다.

// catch()로 오류를 감지하는 코드function getData() {
  return new Promise(function(resolve, reject) {
    resolve('hi');
  });
}

getData().then(function(result) {
  console.log(result);// hithrow new Error("Error in then()");
}).catch(function(err) {
  console.log('then error : ', err);// then error :  Error: Error in then()});

async & await

function fetchItems() {
  return new Promise(function(resolve, reject) {
    var items = [1,2,3];
    resolve(items)
  });
}

async function logItems() { //실행할 함수에 async
  var resultItems = await fetchItems(); // 가져온 promise 객체를 반환하는 함수에 await
  console.log(resultItems);// [1,2,3]}

• fetch

아래와 같이 사용한다.

fetch(데이터요청 할 서버 url)
.then(response => response.json())
.then(data => {
  //데이터 처리 부분
}