2022.02.11 TIL

async/await

• Promise를 활용한 비동기 코드를 간결하게 작성하는 문법
• async/await 문법으로 비동기 코드를 동기 코드처럼 간결하게 작성할 수 있다.
• async함수와 await 키워드를 이용한다.
• await 키워드는 반드시 async 함수 안에서만 사용해야 한다. async로 선언된 함수는 반드시 promise를 리턴한다.

async 함수

async function asyncFunc() {
	let data = await fetchdata()
	let user = await fetchUser(data)
	return user 
}

fetchData fetchUser는 Promise를 return

// 아래 함수는 같은 동작을 한다. 
async function asyncFunc() {
    let data1 = await fetchData1() 
    let data2 = await fetchData1(data1)
    let data3 = await fetchData1(data2) // 순서대로 작동한다. 
    return data3
}

function promiseFunc() {
    return fetcjData1()
        .then(fetchData2)
        .then(fetchData3)
}

• 에러처리

  • try-catch 구문으로 async/await 형태 비동기 코드 에러 처리가 가능하다.

    async function asyncFunc() {
        try {
            let data1 = await 
            fetchData1()
            return fetchData2(data1)
        } catch(e) {
            console.log('실패:', e)
        }   
    }

HTTP, REST API

HTTP(Hypertext Transfer Protocol)

• Web에서 서버와 클라이언트 간의 통신하는 방법을 정한 것

• 클라이언트는 웹 브라우저 등 서버로 요청을 보내는 대상

• 서버는 클라이언트가 요청을 보내기 전까지 대응하지 않음

• 서버와 클라이언트 사이에는 무수히 많은 요소가 존재

• HTTP는 이런 존재들 사이의 통신 방법을 규정

• HTTP Message

  • 서버주소, 요청 메서드, 상태 코드, target path, 헤더 정보, 바디 정보 등이 포함
  • 요청 메세지, 응답 메세지의 모양이 다름
  • HTTP/1.1 메세지는 사람이 읽을 수 있음

• HTTP Header

  • HTTP 메세지의 헤더에는 콘텐츠 관련 정보, 인증 관련 정보, 쿠키 정보, 캐시 관련 정보 등 서버와 클라이언트 간 통신 시 필요한 정보를 담는다.
  • 클라이언트 요청시 서버 응답시 모두 헤더에 정보를 담을 수 있다.

• HTTP status

  • HTTP 요청시 클라이언트는 요청의 결과에 대한 상태 정보를 얻는다.
  • 200, 400 , 500 등 숫자 코드와 OK, NOT FOUND 등의 텍스트로 이루어짐
  • 코드를 이용해 각 결과에 해당하는 행위를 할 수 있음

• 요청 메서드

  • HTTP에서 클라이언트는 서버로 요청을 보낸다
  • 요청 시 요청 메서드로 특정 요청에 대한 동작을 정의한다.
  • GET, POST, PUT PATCH, DELETE, OPTIONS, CONNECT, TRACE 등
    → GET, POST, PUT PATCH, DELETE가 우리가 직접 사용하는 메서드 나머지는 브라우저가 자동으로!!
    

Fetch API

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

• Response 객체는 결과에 대한 다양한 정보를 담는다.
• response.ok는 HTTP status code가 200-299 사이면 true, 그 외 false이다.
• response.status는 HTTP status code를 담는다.
• response.url은 요청한 URL 정보를 담는다.