자바스크립트 promise 함수, async await 키워드, fetch 메서드

promise 함수란 자바스크립트 비동기 처리에 사용되는 객체입니다. promise가 태어난 기원은 XMLHttpRequest api에서부터 시작합니다. promise 사용전 이api를 사용할때 굉장히 코드가 길어지고 복잡했다고 합니다. 따라서 promise 함수가 태어났고, promise의 불편한점을 개선한것이 fetch라고 합니다. fetch api의 return값은 promise 객체라고 합니다. 자 이제 본격적으로 promise 함수에대해 알아보아요.

promise 함수

프로미스를 사용하는 이유는 자바스크립트의 비동기 작업을 할때 콜백지옥이 아닌 간편하게 사용하기 위해서 입니다.

let promise= newPromise((resolve, reject) =>
{if(Math.random() < 0.5) {return reject("실패")}resolve(10)})

위의 코드를 참고 해보면 promise 함수내부의 콜백함수 첫번째 인자값은 resolve 통신이 성공했을때 반환하는 함수, 두번째 인자값은 실패했을때 반환하는 함수 reject 입니다.

위와 같이 설정을 해놓고 아래와 같이 다시한번 호출해야됩니다.

promise.then(data=> {console.log("성공: ", data)})
.catch(e=> {console.log("실패: ", e)})
.finally(() => {console.log("promise 종료")}

위의 코드를 예시로 보면 then은 resolve에서 리턴하여 성공한값을 반환합니다. catch는 reject에서 리턴한값을 반환합니다. finally는 promise함수 호출을 종료하기위한 매서드로 resolve,reject모두 반환합니다. 이렇게 동일한 객체에 메서드를 연결 할 수있는것을 체이닝(chaining)이라 합니다.

Promise All 메서드

Promise.all([promise1,promise2,promise3])
.then(values=> {console.log("모두성공: ", values)})
.catch(e=> {console.log("하나라도실패: ", e)})

Promise.all은 Promise의 배열을 받아 모두 성공시 각Promise의 resolved 값을 배열로 반환 합니다.

async/await

Promise를 활용한 비동기코드를 간결하게 작성하는 문법 입니다. async/await 문법으로 비동기코드를 동기코드처럼 간결하게 작성할수 있습니다. async 함수과 await 키워드를 항상 짝꿍처럼 같이 써줘야되며 await 키워드는 반드시async 함수안에서만 사용해야 합니다. async로 선언된함수는 반드시Promise를 리턴 합니다.

async function async Func() {letdata= await fetchData()
letuser= await fetchUser(data) return user}

위의 예시코드도 반환값은 promise객체를 리턴합니다.

async function async Func() {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 메서드 체인을 연결한것처럼 순서대로 동작합니다. 비동기 코드에 손쉽게 순서를 부여합니다.

await 키워드에서 에러 처리는 try catch 구문을 이용하여 에러 처리가 가능합니다.
아래의 예시코드를 참고해 주세요

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

fetch 메서드

fetch 또한 XMLHTTPRequest를대체하는HTTP 요청API 입니다. 이메서드도 promise 객체를 반환합니다.

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

Response 객체는 결과에 대한 다양한 정보를 담습니다. response.ok는HTTP Status code가200-299 사이면true, 그외false 입니다.

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

response.headers로Response 객체의 헤더 정보 또한 얻을수 있습니다.

fetch(serverURL).then(response=> {returnresponse.json()}).then(json=> {console.log('body : ', json)})

response.json() 메서드는얻어온body 정보를 json으로 만드는 Promise를 반환합니다.

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

headers, body 필드를 활용해 서버에 추가정보를 보낼수 있습니다.