상황
공통으로 비동기 통신하는 함수를 만들고 싶어서 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로 하는 방법도 있었다.
반응형
'Issues > Javascript&jQuery' 카테고리의 다른 글
[javascript & html] 라디오 input 클릭했을때 확인 후 안되게 하기 (0) | 2021.12.29 |
---|---|
[javascript & vue & scss ] 파일경로 ~ 와 @ (0) | 2021.12.29 |
[javascript] input에 숫자만 입력하게 하기 (keyup 이벤트와 input이벤트의 차이 !) (0) | 2021.12.29 |
[javascript] localStorage와 sessionStorage 차이점 정리 (0) | 2021.12.29 |
[Javascript] 가격 콤마찍기 / 돈 (,) 콤마 단위 붙이기 toLocaleString (0) | 2021.12.20 |