[JavaScript] 비동기(async/await, HTTP, REST API, Fetch)

01. async/await

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

✔️사용 방법

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

• async 함수는 function 키워드 앞에 async를 붙여 만든다.
• async함수 내부에서 await 키워드를 사용한다.
• fetchData, fetchUser는 Promise를 리턴하는 함수이다.

✔️await 키워드 실행 순서

async functon asyncFunc(){
     let data1 = await fetchData1();
     let data2 = await fetchData2(data1);
     let data3 = await fetchData3(data2);
     return data3;
}

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

• await 키워드는 then 메서드 체인을 연결한 것 처럼 순서대로 동작함
• 비동기 코드에 쉽게 순서를 부여한다.

✔️에러 처리

function fetchData1(){
    return request()
        .then((response) => response.requestData)
        .catch(error => {
           //error 발생
        })
}

• Promise를 리턴하는 함수의 경우 에러 발생 시 catch메서드를 이용해 에러를 처리한다.
• catch메서드를 사용하지 않는다면 async 함수에서 try-catch구문을 이용해 에러를 처리한다.

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

• try-catch 구문으로 async/await 형태 비동기 코드 에러 처리가 가능
• catch절의 e는 Promise의 catch 메서드가 받는 반환 값과 동일

02. HTTP, REST API

✔️HTTP(Hypertext Transfer Protocol)

• Web에서 서버와 클라이언트 간의 통신하는 방법을 정한 것(규약)
• 클라이언트는 웹 브라우저 등 서버로 요청을 보내는 대상
• 서버는 클라이언트가 요청을 보내기 전까지 대응하지 않음
• 서버와 클라이언트 사이에는 무수히 많은 요소가 존재
• HTTP는 이런 존재들 사이의 통신 방법을 규정

HTTP 통신

✔️HTTP Message

요청, 응답 메시지(HTTP에서 정한 형식)

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

✔️HTTP Header

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

✔️HTTP Status

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

✔️요청 메서드

• HTTP에서 클라이언트는 서버로 요청을 보낸다
• 요청 시 요청 메서드로 특정 요청에 대한 동작을 정의
• GET, POST, PUT, PATH, DELETE, OPTIONS, CONNECT, TRACE 등이 규정됨

✔️REST API(Representational State Tranfer API)

• API(Application Programming Interface)는 사용자가 특정 기능을 사용할 수 있도록 제공하는 함수를 의미
• REST API는 HTTP의 요청 메서드에 응하는 서버 API와 클라이언트 간 통신의 구조가 지켜야 할 좋은 방법을 명시한 것
• 구체적인 내용으로는 요청 메서드의 의미, URI 설계, 클라이언트의 상태에 대한 동작 등을 정의

02. Fetch API

let result = fetch(serverURL);

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

• 기존 XMLHTTPRequest를 대체하는 HTTP 요청 API
• ES6에 추가된 Promise를 리턴하도록 정의됨
• 네트워크 요청 성공시 Promise는 Response객체를 resolve한다.
• 네트워크 요청 실패 시, Promise는 에러를 reject한다.

fetch(serverURL)
    .then(response => {
       response.ok
       response.status
       response.statusText
       response.url
       response.bodyUsed
    })

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

fetch(serverURL)
    .then(resp => {
       for(let [k,v] of resp.headers){
          console.log(k,v);
       }
    })

response.headers로 Resonse객체의 헤더 정보를 얻을 수 있다.

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

• response.json()메서드는 얻은 body정보를 json으로 만드는 Promise를 반환한다.
• Promise가 resolve되면 얻어돈 body정보를 읽는다
• response.text() , response.blob() , response.formData()등의 메서드로 다른 형태의 바디를 읽는다.

✔️Post 요청

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

• fetch(url, options)로 fetch 메서드 옵션을 넣는다
• method필드로 여러 요청 메서드를 활용한다
• headers, body필드를 활용해 서버에 추가 정보를 보낸다.

 

참고

https://swtrack.elice.io/