💻 Web/-- HTTP | Network

Fetch API 의 사용 및 간단한 예제 ( 개념 , 비동기 처리 , ajax )

*Fetch 란?

Ajax를 구현할 수 있는 비교적 최근에 나온 기술.
jQuery.ajax()와 다른점은 (1) fetch로부터 반환되는 객체는 HTTP error상태를 reject하지 않는다. (2) 쿠키를 보내거나 받지 않는다는점.
웹페이지 전체를 리로딩(re-loading)하지 않고, 일부분만 다른 데이터로 교체(갱신)하는 기능을 한다.
Promise 객체를 반환하는 비동기 통신을 한다.

*비동기 처리 : 일반적으로 어떠한 특정 명령어가 있으면, 그것이 완료된 후에 다음 명령어를 수행하지만, 비동기처리는 특정코드를 실행하고, 그 코드가 완료되기 전에 다음코드를 이어서 수행하는것을 말한다.

*Promise(프로미스) : 자바스크립트에서 비동기 처리에 활용되는 객체를 말한다.

*Fetch 간단한 예제 (1)

앵커(<a>태그) 를 걸어놓고, 이를 클릭하게되면 fetch를 통해 다른 파일을 불러서 화면에 나타나도록 하는 예제.

*파일구성
home.html
spring.txt

*Fetch 함수

function fetchPage(fileName){
  fetch(fileName).then(function(response){
    response.text().then(function(text){
      document.querySelector('#text').innerHTML = text;
    })})};

*spring.txt

*home.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>fetch example</h1>
    <h2> season </h2>
<ol>
  <li> <a href="#!spring" onclick="fetchPage('spring.txt')">spring </a> </li>
  <li>summer</li>
  <li>fall</li>
  <li>winter</li>
</ol>
<p id="text"></p>
<script type="text/javascript">
function fetchPage(fileName){
  fetch(fileName).then(function(response){
    response.text().then(function(text){
      document.querySelector('#text').innerHTML = text;
    })})};
</script>
  </body>
</html>

*결과화면

*Fetch 의 기본 코드와 옵션들

*기본적인 fetch 코드(출처 : mozilla)

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

기본적으로 fetch는 해당 url의 정보를 요청한다.

Fetch의 모든 옵션들

// Example POST method implementation:

postData('http://example.com/answer', {answer: 42})
  .then(data => console.log(JSON.stringify(data))) // JSON-string from `response.json()` call
  .catch(error => console.error(error));

function postData(url = '', data = {}) {
  // Default options are marked with *
    return fetch(url, {
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, cors, *same-origin
        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        credentials: 'same-origin', // include, *same-origin, omit
        headers: {
            'Content-Type': 'application/json',
            // 'Content-Type': 'application/x-www-form-urlencoded',
        },
        redirect: 'follow', // manual, *follow, error
        referrer: 'no-referrer', // no-referrer, *client
        body: JSON.stringify(data), // body data type must match "Content-Type" header
    })
    .then(response => response.json()); // parses JSON response into native JavaScript objects 
}

'💻 Web > -- HTTP | Network' 카테고리의 다른 글

쿠키와 세션(cookie session) (0)	2020.05.10
RESTful API, 웹서비스(Web Service) (0)	2020.05.10

Contents

새소식

인기 검색어

Fetch API 의 사용 및 간단한 예제 ( 개념 , 비동기 처리 , ajax )

*Fetch 란?

*Fetch 간단한 예제 (1)

*Fetch 의 기본 코드와 옵션들

'💻 Web > -- HTTP | Network' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바