#TIL_21.08.30

API

• 비동기 Api의 처리는 한 곳에서 모아서 관리하는게 좋다 (api.js)
• Api 의 경우 처음부터 데이터를 만들어서 코드를 짜내려가기 보다는, 더미데이터를 만들어서 화면에서 렌더링이 되는지 테스트하면서 작성하는 것이 좋다.

Promise

• promise 는 비동기 작업을 제어하기 위해 나온 개념
• callback hell 탈출
• promise 로 정의된 작업끼리는 연결할 수 있음 ... depth 가 크게 증가하지 않는 효과가 있음

const promise = new Promise((resolve, reject) => {
	//...
    
    return resolve('...')
})

promise.then(result => ...)

// promise 내부에서 비동기가 종료 될 때, resolve 함수 호출
// promise 내부에서 에러가 발생했을 때, reject 함수 호출
// promise 는 then 을 사용해 비동기 이후 실행할 작업을 지정함

• promise chain 중 작업이 실패했을 경우, catch 로 잡을 수 있다.

~~~.catch(e => {
	alert('error')
})
// catch 를 사용하지 않을 경우, chain 중 에러가 발생하였을 때, chain 이 멈추게 되어 가급적 넣어주는 것이 좋음

• 성공 여부에 상관 없이 호출해야 할 코드가 있다면, finally 로 처리할 수 있다.
• promise 처리된 delay 와 조합 할 수 있다.

promise 내장함수

= Promise.all(iterable): 여러 promise 를 동시에 처리할 때 유용하게 사용된다.

Promise.all([promise1, promise2, promise3].then(...)

• Promise.race(iterable): 여러 promise 중 하나라도 resolve / reject 되면 종료 ...
• Promise.any(iterable): 여러 promise 중 하나라도 resolve 되면 종료함.
• Promise.allSettled(iterable): 여러 promise 들의 성공 / 실패와 상관 없이 모두 처리함.
• Promise.resolve: 주어진 값으로 이행하는 Promise.then 객체를 생성.
  주어진 값이 Psomise 인 경우 해당 Promise 반환
• Promise.reject: 주어진 값으로 reject 처리된 Promise.then 객체를 생성
  주어진 값이 Psomise 인 경우 해당 Promise 반환
  

async, await

• promise 가 callback depth 를 1단계로 줄여주지만, 여전히 불편

async function asyncFunc() {
	const res = await request(...)
}

• async 키워드의 함수는 실행 결과가 Promise 로 감싸짐 ... 결국 Promise 로 작동한다.
• callback, promise 와 다르게 위에서부터 아래로 차례로 출력됨 (유지보수, 가독성 좋음)
• 최신 기술로 top level await 가 등장하여 top level 에서도 await 사용 가능함.
• async, await 의 reject 의 처리 ... try / catch (에러 파악이 수월함)
  promise 의 .catch 와 비슷한 역할
  

---

회고

오늘 급작스럽게 잔여백신을 주워서 맞느라 원래 계획했던 만큼의 공부를 하지 못하였다..
백신 맞고 앉아서 공부해보려고 했는데 너무 피곤해서 약간 비몽사몽으로 강의를 들었는데, 비동기 부분의 처리는 코드를 짤 수는 있는데 아직은 어려워서 나중에 한번 더 봐야겠다.

api 를 다루는 프로젝트가 이번주까진데 api 를 써본적이 없어서 아직 너무 생소하다.. 얼른 강의를 보고 다루는 법을 익히고 프로젝트를 진행해야겠다.