23.10.10
📚 오늘 공부한 것
- Promise
- async/await
- fetch
😲 새롭게 알게된 것
Promise
const promise = new Promise((resolve, reject) => {
// promise 내부에서 비동기 상황이 정상 종료되면 resolve 호출
// promise 내부에서 오류 상황이 발생하면 reject 호출
})⭐️ 프로미스 객체 처리하는 방법 !!
function asyncPromise(){
// ..
return new Promise((resolve, reject) => {
// ...
return resolve('complete!')
}
}
//then의 result에는 resolve를 호출하여 넘긴 'complete!'가 들어감
asyncPromise().then(result => console.log(result))요청 성공 -> 객체내부에서 resolve 리턴 -> 함수호출부에서 then으로 이어짐 -> then의 콜백함수에서 성공에 대한 처리 진행
콜백함수 🔜 Promise
기존 콜백함수로 작성한 코드를 Promise로 바꿔보자
// 콜백함수
export function request(url, successCallback, failCallback) {
const xhr = new XMLHttpRequest();
xhr.addEventListener("load", (e) => {
if (xhr.readyState == 4) {
if (xhr.status === 200) {
successCallback(JSON.parse(xhr.responseText));
} else {
failCallback(xhr.statusText);// Promise
export function request(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.addEventListener("load", (e) => {
if (xhr.readyState == 4) {
if (xhr.status === 200) {
resolve(JSON.parse(xhr.responseText));
} else {
reject(xhr.statusText);Promise의 내장 함수들
Promise.all(iterable)
서로 의존성 없는 api는 한번에 쭉 실행시킬 수 있고, 비동기 작업을 병렬로 처리할 때 많이 쓰임
Promise.race(iterable)
여러 promise 중 하나라도 resolve혹은 reject되면 실행(”종료”).
Promise.any(iterable)
제일 먼저 종료된게 있더라도 그게 reject이엇으면 무시
! .race 와의 차이는, any는 하나라도 resolve가 되어야 처리(”종료”)된다.
Promise.allSettled(iterable)
여러 promise들이 성공했거나 실패했거나 상관없이 모두 이행된 경우 처리
Promise.resolve
주어진 값으로 이행하는 Promise.then 객체를 만든다. 주어진 값이 Promise인 경우 해당 Promise가 반환된다.
Promise.reject
주어진 값으로 reject 처리된 Promise.then객체를 만든다. 주어진 값이 Promis인 경우 해당 Promise가 반환된다.
async/await
제일 진보한 기술이지만 근간은 Promise라는것...
- 장점
직관적이다.
위에서 아래로 순차적으로 실행되기 때문에 가독성이 좋다. - 반환 값은 Promise
그렇기 때문에 .then을 붙여 쓸 수 있다 ! - 에러 다루기
try-catch
fetch api
비동기 http 요청을 좀 더 쓰기 편하게 해주는 api
XMLHTTPRequest를 대체한다.
Promise 기반으로 동작합니다
fetch의 기본 응답 결과는 Response 객체이기 때문에 .json(), .text() 등을 사용해서 이용하자!
⭐️ fetch는 HTTP가 에러가 나더라도 reject되지 않는다!!
-> fetch가 성공했는지를 확인하고 catch 블록을 다뤄야한다!!
-> 서버 요청 중 에러가 생겼을 경우에도 then으로 떨어지므로 respone status code 가 ok임을 체크해주는 것이 좋다.
😮💨 느낀 점
개발을 하면서 이론을 얕게 공부할 땐 async, await가 가장 최신 기술이고 많이 쓰니까 그에 대해서만 알고 넘어갔다. "Promise가 근간"이라고 여러번 언급하시는 것을 들으면서 반성했다..
Promise코드를 짜보고 내 가정대로 작동하는지 실험을 많이 해보면서 공부해서 이해가 잘 되었다. 나중에 asnyc/await를 쓰겠지만, 그래도 Prommise 작동을 이해한 코드를 짜길 바란다.. 해보고 안되면 고치고 이런 삽질을 줄여야지 ㅠㅠ
🤔 오늘 회고
Keep
오늘도 강의에 나오는 문법과 용어에 꼬리에 꼬리를 물며 찾아다니다 보니 정리 마무리도 길어졌다. 그래도 파편을 모여있는 지식들을 붙여모으고 있는 것 같아서 좋다.
Problem
정답지 없는 시도가 필요하다.
정답의 코드를 보고 거기서부터 시작해서 여러 시도를 해보는 것도 도움이 되었다고 느끼지만, 맨땅에 헤딩하면서 굴러보는 것도 힘들지만 도움이 될거같다. 사이드 플젝에서도 같은 걸 느낀다.
Try
내일 강의 실습까지 마무리 하고 나서 비동기처리에 대해 총정리를 해두어야겠다.
