00
- await키워드는 async 함수 내에서만 사용할 수 있다.
- async 함수는 Promise를 반환한다.
- .catch 대신 async 함수 내에서 try-catch 구문을 사용해 에러 처리를 할 수 있다.
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 함수는 funciton 키워드 앞에 async를 붙여 만든다.
async 함수 내부에서 await 키워드를 사용한다.
async 함수 내부에서 await 키워드를 사용한다.
fetchData, fetchUser는 Promise를 리턴하는 함수이다.
async function 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)
}try catch
await 키워드는 then메서드 체인을 연결한 것처럼 순서대로 동작한다.
비동기 코드에 쉽게 순서를 부여한다.
function fetchData1() {
return request()
.then(res => res.requestData)
.catch(error => {})
}Promise를 리턴하는 함수의 경우, 에러가 발생하면 catch메서드를 이용하여 에러를 처리한다.
catch 메서드를 사용하지 않는다면 async함수에서 try-catch 구문을 이용하여 에러를 처리한다.
async function asyncFunc() {
try {
let data1 = await fetchData1()
return fetchData2(data1)
} catch (e) {
console.log('실패: ", e)
}
}try-catch 구문으로 async/await 형태 비동기 코드 에러 처리가 가능하다.
catch절의 e는, Promise의 catch 메서드가 받는 반환 값과 동일하다.
HTTP, REST API
HTTP message
서버주소, 요청메서드, 상태코드, target path, 헤더 정보, 바디정보 등이 포함
HTTP/1.1 메시지는 사람이 읽을 수 있음
HTTP message의 header에는 컨텐츠 관련 정보, 인증 관련 정보, 쿠키 정보, 캐시 관련 정보 등 서버와 클라이언트간 통신시 필요한 정보를 담는다.
클라이언트 요청시, 서버응답시 모두 헤더에 정보를 담을 수 있다.
REST API
(Representational State Transfer API)
API(Application Programming Interface)는 사용자가 특정 기능을 사용할 수 있도록 제공하는 함수
REST API는 HTTP의 요청 메서드에 응하는 서버 API와 클라이언트 간 통신의 구조가 지켜야 할 좋은 방법을 명시한 것
구체적인 내용: 요청 메서드의 의미, URI 설계, 클라이언트의 상태에 대한 동작 등 정의
Fetch API
let result = fetch(serverURL)
result
.then(res => {
if(res.ok) {
// 요청 성공
}
})기존 XMLHTTPRequest를 대체하는 HTTP 요청 API
ES6에 추가된 Promise를 리턴하도록 정의됨
네트워크 요청 성공시 Promise는 Response 객체를 resolve 한다
네트워크 요청 실패시 Promise는 에러를 reject 한다.
feetch(serverURL)
.then(res => {
res.ok // HTTP Status Code가 200-299 사이면 true, 그 외 false
res.status // HTTP Status code
res.statusText
res.url // 요청한 URL 정보
res.bodyUsed
})fetch(serverURL)
.then(res => {
for (let [k, v] of res.headers) {
console.log(k, v)
}
})response.headers로 헤더 정보를 얻을 수 있다.
fetch(serverURL)
.then(res => res.json())
.then(json => console.log('body: json)json() 메서드는 얻어온 body 정보를 json으로 만드는 Promise를 반환한다.
Promise가 resolve되면 얻어온 body 정보를 읽는다.
text(), blob(), formData() 등의 메서드로 다른 형태의 바디를 읽는다.
fetch(serverURL, {
method: 'post',
headers: {
'Content-Type' : 'application/json; charset=utf-8',
'Authentication: 'mysecret'
},
body: JSON.stringify(formData)
})
.then(res => res.json())
.then(json => console.log('POST요청 결과: ', json))fetch(url, option)로 fetch 메서드 옵션을 넣는다.
문제
async/await
- await 키워드로 비동기 처리에 순서를 부여한다.
await 키워드는 여러 개가 쓰였을 시 뒤쪽 코드를 Promise의 .then() 함수를 사용하는 것처럼 만들어, 비동기 처리에 순서를 부여한다. - 에러가 발생했을 경우 try-catch 구문으로 에러를 처리할 수 있다.
try-catch 구문으로 비동기 코드이ㅡ 에러 또한 처리할 수 있다. - async함수는 동기적으로 보이지만 비동기적으로 실행된다.
단 내부에서 await키워드가 쓰이지 않았을 경우에는 Promise.resolve()로 처리된다. - await 키워드는 promise를 return 하지 않는 함수라도 사용할 수 있다. 단 이 경우 리턴한 데이터는 Promise.resolve()로 감싸진다.
HTTP
- HTTP는 서버와 클라이언트 간 통신방법을 정한 규약이다.
- HTTP 요청 메서드는 요청에 대한 동작을 정의한다.
- HTTP 요청메시지, HTTP 응답 메시지에 헤더 정보가 모두 포함된다.
- HTTP Status는 요청의 결과를 코드로 나타낸다.
Fetch API
- fetch()는 프로미스를 리턴한다.
- 네트워크 요청 실패시 response.ok는 false이다
- 네트워크 요청 성공시 response.headers로 헤더 정보를 얻을 수 있다.
- json() 메서드는 비동기 함수로 프로미스를 리턴한다.
03
find
const color = data.find(e => e.color === inputColor.value);find메서드를 사용해서 배열의 모든 원소(객체)에서 조건에맞는 원소(객체)를 찾는다.
