[javascript] 비동기3 - async/await, fetch API (Post 정보 조합하기)

async/await

1. 기존의 비동기 처리 방식인 (1) callback (2) promise 의 단점을 보완하기 위해 등장한 문법.
2. 가독성이 높아지고 .then 메서드 체인 없이도 순서가 있는 비동기 처리가 가능해졌다.
3. async/await 함수의 리턴값은 항상 promise여야 한다. promise가 아닌 값이 리턴되면 Promise.resolve()로 감싸져 리턴된다.
4. 에러 처리는 try-catch 구문을 사용한다.

async function asynFunc() {
    try {
        let data = await fetchData();
        let user = await fetchUser(data);
        return user;
    } catch (e) {
    	console.log("실패:", e);    
    }
}

• function 키워드 앞에 async를 붙여 async 함수를 만든다.
• async 함수 내에서 await 키워드를 사용하여 fetchData() 와 fetchUser() 순서로 비동기 처리한다.
• 이 코드에서 fetchData() 와 fetchUser()는 Promise를 리턴해준다.
• try 구문에서 만약 오류가 발생하면 코드실행을 중단하고, catch로 넘어가 에러처리를 한다.

 

 

---

 

 

fetch API

1. 기존 XMLHTTPRequest 를 대체하는 HTTP 요청 API이다.
2. ES6에 추가된 Promise를 리턴하도록 정의되었다.
3. 네트워크 요청 성공시, promise는 response 객체를 resolve( )하고, 실패시 promise는 error객체를 reject( )한다.

 

let result = fetch(serverURL) // fetch API 호출하면 promise를 반환

result.then(response => {
    if(response.ok) {
        // 호출 성공시 실행할 코드 입력
        // ...
    }
})
.catch (error => {
    // 호출 실패시 실행할 코드 입력
    // ...
})

response.status : HTTP 상태코드가 저장된다.

response.ok : HTTP 상태코드가 200~209 이면 true를 저장하고, 아니면 false를 저장한다. 

response.url : 요청한 url 정보를 담는다.

response.header : Response객체의 헤더 정보를 얻을 수 있다.

response.blob() : 파일을 요청했다면 여기에 파일이 들어있다.

response.json() 메서드 : body 정보를 json으로 만드는 Promise를 반환하는 비동기 함수이다.

 

 

fetch를 Post 요청

fetch (url, options)로 옵션사항으로 post 방식을 선택할 수 있다.

옵션에는 headers / body 정보도 함께 전달 가능하다.

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)
})

 

 

Post 정보 조합하기

...