jQuery Ajax 와 Promise 합치기

🥝 합치기

1. HTTP GET METHOD

async function get(url, queryParamObject = {}, dataType = "json") {
  return new Promise((resolve, reject) => {
    $.ajax({
      type: "get",
      url: url,
      data: queryParamObject,
      dataType: dataType,
      success: function(result, textStatus, jqXHR) {
        resolve({result, textStatus, jqXHR});
      },
      error: function(jqXHR, textStatus, error) {
        console.error("error occurred");
        reject(error); // 나는 주로 여기에 나만의 에러를 만들고 
        			   // jqXHR, textStatus, error 를 Wrapping 한다.
        			   // ex: new RestError({jqXHR, textStatus, error});
      }
    });
  });
}

2. HTTP POST METHOD

async function post(url, payload = {}, dataType = "json") {
  return new Promise((resolve, reject) => {
    $.ajax({
      type: "post",
      url: url,
      data: payload,
      dataType: dataType,
      success: function(result, textStatus, jqXHR) {
        resolve({result, textStatus, jqXHR});
      },
      error: function(jqXHR, textStatus, error) {
        console.error("error occurred");
        reject(error);
      }
    });
  });
}

3. HTTP POST METHOD (json 전송용)

async function postJSON(url, payload = {}, dataType = "json") {
  return new Promise((resolve, reject) => {
    $.ajax({
      type: "post",
      url: url,
      data: JSON.stringify(payload), // json encoding!
      contentType: "application/json;charset=utf-8",
      dataType: dataType,
      success: function(result, textStatus, jqXHR) {
        resolve({result, textStatus, jqXHR});
      },
      error: function(jqXHR, textStatus, error) {
        console.error("error occurred");
        reject(error);
      }
    });
  });
}

🥝 사용법

1. async + await

(async () => {
  // https://jsonplaceholder.typicode.com/ 사이트의 json 예제 사용
  try {
  
    let {result: postList} = 
      await get("https://jsonplaceholder.typicode.com/posts");
    
    postList.forEach(item => console.log(item));
    
  } catch(err) {
    console.error(err); 
  }
  
})();

2. promise chaining

(() => {
  // https://jsonplaceholder.typicode.com/ 에서 json 예제 사용
  
  get("https://jsonplaceholder.typicode.com/posts")
  .then(({result: postList}) => {
  	postList.forEach(item => console.log(item));
  })
  .catch(error => {
  	console.error(error);
  });
  

})();