자바스크립트 Fetch API

작성일 Edited on In , Symbols count in article: 514 Reading time ≈ 1 mins.

기본설명

기본적인 모양은 아래와 같습니다.

1
2
3
fetch(url)
.then(response=> response.json())
.then(data => console.log(data));

XMLHttpRequest 를 사용하면 아래와 같이 사용할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();

// Define a callback function
xhttp.onload = function() {
  // Here you can use the Data
}

// Send a request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

JSON 데이터를 받아오는 예제입니다.

1
2
3
fetch('http://example.com/movies.json')
.then((response) => response.json())
.then((data) => console.log(data));