반응형
fetch
: Promise기반 ES6 내장 라이브러리로 API를 간편하게 호출할 수 있다.
기존 비동기처리는 이벤트를 기반으로 하는 XHR객체를 사용했으나 이후 http요청에 최적화된 api들이 생겨나기 시작
=> fetch(Promise), Axios(xhr, promise)
- 결과 반환 전까지의 3개 상태 (이행/거부에 해당하는 두 개의 콜백함수를 인자로 받음)
resolve : 해결, 이행, 완료시 결과를 표현하며 then()을 통해 처리결과를 전달받을 수 있음
reject : 거부, 실패시 결과를 표현하며 catch()로 에러정보를 받을 수 있음
- 사용 방법
Fetch(requestInfo(URL), requestInit(OPTION))
- 응답 객체 제공 메소드
| 형태 | 뜻 |
| text() | 응답을 텍스트로 변환 |
| json() | 응답을 JSON형태로 파싱 |
| blob() | 응답을 blob형태로 반환(멀티미디어 데이터를 다룰 때 사용) |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input id="userId" value="b001">
<input type="password" id="userPw" value="1004">
<button>버튼</button>
<div></div>
<script>
document.querySelector('button').addEventListener('click', function(){
let userId = document.querySelector('#userId').value;
let userPw = document.querySelector('#userPw').value;
let opt = {
method: 'post',
body: new URLSearchParams("uId=" + userId + "&uPw=" + userPw)
};
let rst = fetch("loadTest.jsp", opt);
// console.log(rst);
rst.then( rst => rst.json() ) // json정보를 파싱처리
.then( data => data.rst ) // 파싱처리된 결과 (=객체로 변환된) 결과를 매개변수가 받음
// .then( data1 => console.log("1회 출력된 정보는 더이상 출력되지 않음", data1))
.then( data2 => {
if(data2 == "ok") document.querySelector('div')
.innerHTML = "<mark>로그인 " + data2 + "</mark>";
else document.querySelector('div').innerText = "회원정보가 맞지 않음";
})
.catch(err => console.log("에러>> ", err))
.finally(alert("성공/실패 상관없이 무조건 뜸"));
});
</script>
</body>
</html>
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] 22장 jQuery를 이용한 Ajax (0) | 2024.02.29 |
|---|---|
| [jQuery] 21장 Ajax를 이용한 페이지 예제 (0) | 2024.02.28 |
| [jQuery] 20장 Ajax (0) | 2024.02.27 |
| [jQuery] 19장 JSON (1) | 2024.02.27 |
| [jQuery] 18장 콜백 함수와 체이닝, 동기와 비동기 (1) | 2024.02.27 |