async / await 와 API

1. Async / Await

async와 await 는 Promise를 더 깔끔한 코드로 활용하는 방법이다.

비동기 코드인 Promise를 동기적인 코드처럼 작성할 수 있게 해준다.

=> then과 catch를 사용할 때는 Promise의 리턴값을 then에서 받아 써야 했는데, await를 사용하면 리턴값을 변수에 넣을 수 있게된다.

async function test(){
	return 'Hello';
}

async function asyncFunc(){
	let data = await test();
}

 

문법, 규칙

① await 키워드는 async 함수 안에서만 사용할 수 있다.

② async 함수는 Promise 를 리턴한다.

③ async 함수를 만드는 방법 : 함수 앞에 async 를 붙인다.

④ async함수 내부의 코드실행은 비동기적으로 된다. 내부에서 await 키워드가 쓰이지 않았으면 Promise.resolve()로 처리된다.

⑤ await키워드는 프로미스를 리턴하지 않는 함수라도 사용할 수 있다. Promise.resolve()로 처리된다.

 

---

 

2. HTTP = Hypertext Transfer Protocol

서버와 클라이언트가 Web에서 통신하는 방법을 규정해 놓은 것을 http라고 한다.

클라이언트 : 서버로 요청을 보내는 대상이다.

클라이언트가 서버에 Request를 보내면 서버에서 클라이언트에게 Response를 보낸다.

 

http 에 Request, Response message 형식이 정해져 있다.

서버 주소, 요청 메서드, 상태 코드, target path, 헤더정보, 바디정보 등이 포함된다.

 

헤더

서버와 클라이언트 간 통신 시 필요한 정보를 담는다.

 : Content-Type(컨텐츠 형식, 파일형식 등), Authorization(인증 관련 정보), Cookie(사용자의 활동 정보), Cache

HTTP Statue

요청의 결과에 대한 상태 정보

 : 숫자코드(200, 400, 500 등), 텍스트(NOT FOUND) 등.

Method 요청 메서드

요청 메서드 요청에 대한 동작을 정의한다.

• GET 
• POST
• PUT
• PATCH
• DELETE
• OPTIONS
• CONNECT
• TRACE

options, connect, trace는 브라우저에서 자동으로 정함.

 

---

3. REST API = Representational State Transfer API

* api : 사용자가 특정 기능을 사용할 수 있도록 제공하는 함수.

rest api : HTTP URI ( Uniform Resource Identifier )를 통해 자원을 명시하고, HTTO Method(Get, Post, Put, Delete)를 통해 해당 자원에 대한 CRUD( Create Read Update Delete ) Operation을 적용하는 것.

http의 요청 메서드에 응하는 서버 api와 클라이언트 간 통신의 구조가 지켜야할 좋은 방법을 명시한 것.

즉, http를 어떻게 잘 사용하여 서버와 클라이언트의 통신을 구축할 것인지 제시하는 방법.

요청 메서드의 의미, URI 설계, 클라이언트의 상태에 대한 동작 등을 정의하고 있다.

http는 요청 메서드의 종류 (GET, POST, PUT, DELETE 등)을 정해 놓았고, REST API는 그 메서드들에 의미를 부여했다.

• GET : 리소스 정보를 얻음. 정보를 가져올 때 사용
• POST : 리소스를 생성. 서버에 정보를 부친다. 내용을 생성할 때 사용
• PUT : 리소스를 생성하거나 업데이트. 기존의 정보를 업데이트할 때 사용.
• PATCH : 리소스를 생성하거나 업데이트. 기존의 정보를 업데이트할 때 사용.
• DELETE : 리소스를 제거. 기존의 정보를 삭제할 때 사용.

 

---

 

4. Fetch API

Fetch api는 기존의 XMLHTTPRequest를 대체하는 http 요청 api 이다.

ES6에 추가된 Promise를 리턴하도록 정의됨.

Promise는 네트워크 요청 성공시 Response객체를 resolve 하고, 네트워크 요청 실패시 에러를 reject 한다.

fetch(serverURL)
.then(response => {
	if(response.ok){
    	// 요청 성공
    }
})
.catch(error => {
	// 요청 실패
})

 

Response 객체

• response.ok : HTTP status code가 200~299 일 때 true, 그 외 false를 반환.
• response.status : HTTP status code
• response.statusText : not found등
• response.url : 요청한 URL 정보
• response.bodyUsed
• response.headers : Response객체의 헤더 정보
• response.json() : Response객체의 바디에 담긴 데이터를 json 형태의 Promise 객체로 반환한다.

fetch(serverURL)
.then(response => {
	return response.json()
})
.then(json => {
	console.log(json)
})

• response.text()
• response.blob()
• response.formData()

-> json외 다른 형태의 데이터들을 읽을 때 사용하는 메소드.

 

fetch api 활용

fetch(serverURL, {
	method : 'POST',
    headers : {
    	'Content-Type' : 'application/json; charset=utf-8',
        Authentication : 'mysecret'
    },
    body: JSON.stringify(formData)
    
})
.then(response => {
	return response.json()
})
.then(json => {
	console.log('POST 요청 결과 : ', json)
})

fetch( ) 안에 url 과 요청 메세지 정보를 넣는다.

method 필드에 여러가지 요청 메서드를 쓰고, headers 필드에 요청하는 내용에 대한 정보를 담고, body필드에 요청하는 데이터를 쓴다.