[JS] jQuery ajax와 async / await

• 이게 best Practice인지는 모르겠음.

const getAjax = function(url) {
  return new Promise((resolve, reject) => { // 1.
    $.ajax({
      url: url,
      type: "GET",
      dataType: "json",
      data: {
        ascending: false,
        max: 20,
      },
      success: (res) => {
        resolve(res);  // 2.
      },
      error: (e) => {
        reject(e);  // 3.
      }
    });
  });
}

$(document).on('click', "#btnId", async () => {  // 4.
  try {
    const { token, items } = await getAjax(url);  // 5.
    
    // token = API로 반환된 res.token
    // items = API로 반환된 res.items
  } catch(e) { // 6.
    console.log(e);
  }

});

1. getAjax 함수가 new Promise를 반환할 수 있도록 한다.
2. ajax 이행 성공시 resolve(res)에 의해 res가 반환된다.
3. ajax 이행 실패시 reject(e)에 의해 e가 반환된다. 처리는 6.과 같이 await 구문을 try - catch 블록에 포함시켜 수행할 수 있다.
4. 화살표 함수에는 async 키워드만 붙여주면 된다.
5. 비동기 처리를 하는 함수 앞에 await 키워드를 붙여주며, 반환 결과는 구조 분해 할당으로 변수에 초기화할 수 있다.
6. reject(e)를 처리하기 위한 try-catch 블록