> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/dom/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/dom/ajas/ajax-study-simple/fetch-api.md).

# fetch API

{% hint style="info" %}
ES6를 정리할 때 더 자세하게 정리할 예정이니 간단하게 복습하기 
{% endhint %}

```javascript
fetch('html').then(funtion() {})
```

![](https://1258214208-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQG_6grsIF7SikoY7zP%2F-MQqjBRuqJPtqrAXBL4V%2F-MQqmA5sNexvtY-zBubK%2Fimage.png?alt=media\&token=38596e0c-bc28-4804-bf87-3b7033b7630e)

fetch() : 클라이언트가 서버에 인자에 전달된 파일을 요청한다. 

then() : 응답이 끝나면 이 메서드를 실행한다. 

```javascript
function response() {
  console.log(success);
};

fetch('html').then(response);
console.log(one);
console.log(two);
```

위의 코드를 실행하면 console.log는 어떤 순서로 실행 될까?

```javascript
// 결과
one
two
success
```

왜 response() 함수가 먼저 실행되지 않았을까? 

ajax는 비동기(asynchronous) 통신이기 때문이다. 비동기 통신은 기다리지 않고 한 번에 여러가지 일을 수행할 수 있다. 

{% hint style="info" %}
반대로 동기(synchronous)는 여러가지 일을 수행할 수 없어서 기다리며 순서대로 진행된다. 
{% endhint %}