fetch() 를 함수로 만들 때 콜백처리 방법?
본문
서버의 question.php 에 POST로 데이터를 보내고, 처리된 결과를 answer 로 받으려고 합니다.
fetch() 사용을 함수로 만들어서 사용하고 싶은데 문제가 발생하네요.
아래 (2) 번 자리를 alert(result) 로 하면 결과값이 잘 나타납니다.
그런데 이 결과값을 받으려고 여기를 return result; 로 해서 (1) 번에서 받으려고 하면 [object Promise] 로 나타나네요.
원하는 것은 (1)번 alert 에서도 (2)을 alert 와 같은 내용이 나와야 합니다.
느낌에 비동기여서 결과값을 받기도 전에 return 해서 그런거 아닐까??... 생각드는데 어떻게 해야할지 모르겠네요..
<script>
let data = 'no=123&name=홍길동';
let answer = fetchPost('question.php',data);
alert(answer); //-- (1)
async function fetchPost(url, data) {
let response = await fetch(url, {method:'POST',
headers: {'Content-Type':'application/x-www-form-urlencoded'},
body: data});
if (response.ok) {
let result = await response.text();
return result; //-- (2) alert(result);
}else{
alert('HTTP-Error: '+ response.status);
}
}
</script>
답변 2
async await도 내부적으로는 promise 객체로 리턴되고 활용됩니다
다만 catch then보다는 그냥 await async로 쓰는게 코드 짜기도 편하기에 지원되는 기능입니다
해당 객체를 async 영역으로 감싸져있지 않은곳에서 받으면 promise 객체로 받을 수 밖에 없습니다
전역, 루트에서는 async를 쓸 수 없기 때문에
<script>
(async()=>{
let data = 'no=123&name=홍길동';
let answer = await fetchPost('question.php',data);
alert(answer); //-- (1)
})()
</script>
이런식으로 활용하세요.
아~ 감사합니다.
코드와 설명을 이해는 못하겠지만 말씀대로 하니까 작동하네요...ㅎ
코드를 공부해 보겠습니다...^^
async function fetchPost(url, data) {
let response = await fetch(url, {method:'POST',
headers: {
'Content-Type':'application/x-www-form-urlencoded'
},
body: data
}
)
.then(res => res.json())
.catch(e => console.log(e))
}
감사합니다.
그런데 .then .catch 방식 말고 제가 쓴 것 처럼 if (response.ok) else 방식으로 하고 싶어요.
이 방식이 훨씬 직관적이어서...ㅠ
답변을 작성하시기 전에 로그인 해주세요.
