본문 바로가기

Issues/Javascript&jQuery

[javascript & 비동기통신] new Promise() / fetch / try catch

상황

공통으로 비동기 통신하는 함수를 만들고 싶어서 common.js에 함수를 만듬.
function requestApi(request) {
  if(!request) return ;
  
  $.ajax({
  	url: request.url,
    type: request.method ? request.method : "GET"
	dataType:"text",
	success(result){
		return result; //하면 result 를 리턴해줄 것이라 생각
	},
	error(err){
		console.error(err);
	}
  })
}

 

그리고 이걸 필요한 페이지에서 async await을 사용하여 썼지만 response가 undefined가 나옴!!!
const requestWeather = async() => {
    try {
    	const data = "넘길 파라미터";
        const response = await requestApi({
            url: "연동할 url",
            method: "post",
            data
        })
        
        console.log(response) //undefined
    }
    catch(err) {
    	console.error(err)
    }
	
}

 

해결

그래서 비동기 통신을 다시 공부해보았다....


방법1 new Promise ()

common.js

function requestApi(request) {
  if(!request) return ;
  
  return new Promise((resolve, reject) => {
     $.ajax({
         url: request.url,
         type: request.method ? request.method : "GET"
         dataType:"text",
         success(result){
             resolve(result); //하면 result 를 리턴해줄 것이라 생각
         },
         error(err){
             reject(err);
         }
    })
  })
}
new Promise 를 통해 성공하면 resolve에, 실패하면 reject로 내보냈더니 정상적으로 작동하였다. 

 

방법2 fetch & then

function requestApi(request) {
  if(!request) return ;
  
  return fetch(request.url, {
      method: request.method
      body: JSON.stringify(request.data),
      headers:{
        'Content-Type': 'application/json'
      }
    })
    .then(response => return response.json())
    .catch(err => console.error(err))
}
fetch then을 통해 성공하면 then으로, 실패하면 catch로 하는 방법도 있었다.
반응형