비동기HTTP통신 :: ajax, fetch, axios

개발에 따라 클라이언트와 서버 간의 데이터 교환을 위해 비동기 HTTP 통신을 수행하게 되었습니다.ajax 말고도 다른 비동기 HTTP 통신이 있다는 것을 알고 정리하려고 합니다.:)*HTTP 웹브라우저와 웹서버간 HTML 문서를 주고받는 데 사용되는 통신프로토콜(통신규약) 통신규약에 맞게 데이터를 주고받는다. (주고받는 양식의 틀이 있다)비동기 HTTP Request:ajax, fetch, axiosajax WEBAPI인 XMLHTP Request 객체를 사용하여 페이지 전체를 갱신하지 않고 일부만 업데이트할 수 있는 XMLHTP Request 사용시 불편함과 호환되므로 JQuery 내에서 ajax를 사용하는 것이 일반화되었다(ES6 이후에는 fetch API를 통해 구현하는 것이 일반화되었다고 한다). ajax 메리트가 필요한 부분만 업데이트 할 수 있으며 전체적인 리렌더링 하지 않음(점멸 X Query) JQuery를 사용하는 것이 편리함(cdnimport)<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js “></script>XMLHTTP 요구var xhr = new XMLHttpRequest();xhr.onreadystatechange = function() { // if (xhr.readyState === xhr)。DONE) { // 청r.status === 200 | | xhr.status === 201) { console.log(xhr.responseText); } else { console.err.error(xhr.responseText); } } } ;xhr.open(‘GET’, ‘URL’); // 메r.send(xhtttps:///xhr.send); // 송 전 청 와 () 드jquery ajax$.ajax({url:”/usr/member/findUserId”, // 클라이언트가 요청을 발송하는 서버의 URL 주소 데이터: {name:”홍길동”}, // HTTP 요청과 함께 서버로 보내는 데이터 유형: “GET”, // HTTP 요청 방식(GET, POST) dataType: “json” // 서버에서 보내는 데이터 유형})$.ajax({url:”/usr/member/findUserId”, // 클라이언트가 요청을 발송하는 서버의 URL 주소 데이터: {name:”홍길동”}, // HTTP 요청과 함께 서버로 보내는 데이터 유형: “GET”, // HTTP 요청 방식(GET, POST) dataType: “json” // 서버에서 보내는 데이터 유형})fetch ES6에서 들어온 자바스크립트 내장 라이브러리. XML HTTP Request의 대체자로 나온 것에 fetch API fetch 장점 내장 라이브러리이기 때문에 별도 import 불필요 Promise 기반으로 데이터 취급이 용이함(콜백 지옥 탈출) fetch 단점 지원하지 않는 브라우저가 있음(IE11..) JSON 변환 과정 필요 네트워크 오류 발생시 response timeout 없이 기다려야 함(계속 기다림) API 요청 취소 불가fetch(「주소」, 설정 오브젝트) hen(콜백)atch(콜백);설정 객체에는 이렇게 들어갈 수 있다const init = {content: ‘GET’, ヘッダー: { “Content-Type”: “application/json”, },···}const init = {content: ‘GET’, ヘッダー: { “Content-Type”: “application/json”, },···}axios 브라우저, node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 *사용한 적이 없다. axios 장점 Promise 기반이므로 데이터 취급 편리 크로스 브라우징 기반으로 브라우저 호환성 좋은 요청 취소, 타이프아웃 설정 가능 자동으로 JSON 데이터 형식으로 변환되는 fetch보다 기능이 다양 XSRF 해킹 기법에 비교적 안전 axios 단점 사용을 위해 모듈 설치 필요npm install axiosnpm install axios콜백 지옥이란 비동기 함수 콜백 내부에서 다음 작업을 수행하는 것.콜백을 이용한 비동기 처리는 아래와 같이 콜백 지옥을 만든다.3회 이상으로 가독성이 매우 낮다.콜백 지옥이란 비동기 함수 콜백 내부에서 다음 작업을 수행하는 것.콜백을 이용한 비동기 처리는 아래와 같이 콜백 지옥을 만든다.3회 이상으로 가독성이 매우 낮다.콜백 지옥을 탈출하는 방법으로는 Promise, Promise+async/await이 있다.이 두 가지는 다음 포스팅에서 작성해 보려고 해.참고사이트https://ghost4551.tistory.com/139https://cocoon1787.tistory.com/756