fetch 함수는 자바스크립트에서 서버의 데이터를 요청할 때 사용할 수 있다. 데이터는 api 데이터, 파일 또는 이미지 등이 될 수 있다. fetch 함수는 기본적으로 비동기로 동작하며, 성공시 then 메서드를 실행하고 실패시 catch 메서드를 실행한다.
자바스크립트 fetch 함수 사용법
api 파일 이미지 등 데이터 요청하기
서버에는 무수한 자료들이 있고, 클라이언트 프로그램들은 사용자를 위해 서버에 있는 데이터를 수시로 요청한다.
서버에 있는 데이터는 텍스트, 이미지 등의 자원 리소스들이 될 수도 있다.
자바스크립트는 서버에 있는 여러 데이터들을 요청할 수 있는데 이 때 사용할 수 있는 함수는 fetch 이다.
fetch 함수는 특정 서버에 있는 데이터, 파일, 이미지 등의 데이터를 비동기로 요청하고 가져올 수 있도록 해 준다.
사용법
fetch 함수는 서버의 url 을 입력받아 클라이언트의 요청을 보내고 응답을 한다.
url 은 파일이 될 수도 있고, 텍스트가 될 수도 있으며 데이터를 불러오는 json 또는 xml 형태의 api 가 될 수도 있다.
비동기로 동작하여 데이터를 가지고 오게 된다.
fetch 함수는 요청에 대한 결과를 처리하기 위한 2개의 메서드를 가지고 있다.
요청 성공시 then 메서드에 있는 코드를 실행하고, 요청 실패시 catch 메서드를 실행한다.
fetch(url)
.then((response) => /* 성공시 코드 실행 */ ))
.catch((error) => /* 실패시 코드 실행 */);코드 작성하기
fetch 함수에 대한 기본적인 사용방법은 위와 같다.
아래는 fetch 함수를 사용하여 api 데이터를 요청하는 코드이다.
다만, RSS 의 경우 CORS 에 대해 요청이 거부된다.
CORS 에 대한 내용을 찾아봐야 겠다. 굳이 fetch 함수가 아니더라도 RSS 요청을 할 수 있는 방법은 여럿 존재한다.
<!-- html5 웹문서 명시 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- 반응형 meta 명시 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jquery cdn -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
</body>
<script>
$(document).ready( function() { /* Load Comp. without resources */ });
$(window).on('load', function() {
/* Load Comp. with resources */
fnTestFetch();
});
</script>
<script>
var fnTestFetch = function() {
// https://jsonplaceholder.typicode.com/
var _target = "https://jsonplaceholder.typicode.com/todos/1";
// https://dummyjson.com/
_target = "https://dummyjson.com/products/1";
// CNN RSS - CORS 에러
//_target = "http://rss.cnn.com/rss/edition.rss";
fetch(_target)
.then( res => res.json() )
.then( json => console.log(json) )
.catch( result => console.log("실패", result) )
;
}
</script>
</html>위의 코드에서 fetch 함수가 있는 자바스크립트 부분만 보도록 하자.
주소는 3가지를 사용하였다. 첫번째와 두번째는 api 데이터를 사용하기 위한 더미 데이터이다.
3번째는 cnn rss 주소로 CORS 로 인한 접근이 차단된 곳이다.
fetch 함수에는 then과 catch 메서드를 사용하고 있다.
fetch 함수를 사용하여 요청이 성공되면 then 메서드를 실행하고 요청 실패시 catch 메서드가 실행되며 에러를 표시할 것이다.
위의 코드는 console.log 의 개발자모드에서 볼 수 있다.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 알림창 여러 줄 표시하기 javascript alert multi line (0) | 2022.12.22 |
|---|---|
| 자바스크립트 confirm 함수 예 아니오 선택하기 (0) | 2022.12.20 |
| 자바스크립트 에러 발생 시키기 강제로 에러 만들고 테스트하기 (0) | 2022.12.16 |
| jquery ajax 순차적 동기 처리 async false 메서드의 실행이 완료될 때까지 기다린다. (0) | 2022.12.13 |
| 웹사이트 로딩바 만들기 로딩화면으로 기다림 방지 (0) | 2022.11.03 |
댓글