티스토리 뷰
Promise
: 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냄
미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환
Promise의 상태
- 대기(pending) : 이행/ 거부하기 전 초기 상태
- 이행(fulfilled) : 연산 성공
- 거부(rejected) : 연산 실패
Promise의 callback 함수의 매개변수 resolve, reject
: 성공할 경우 then으로 받은 resolve 함수 실행
실패(에러)할 경우 catch로 받은 reject 함수 실행 에러 전달(혹은 then의 두번째 인자)
then 메서드는 onFulfilled, onRejected(성공, 실패)를 인자로 받음
catch(failureCallback) === then(null, failureCallback)
=> 코드가 길어지기 때문에 resolve- then, reject- catch 한 줄씩 작성하는 것을 권장
then은 Promise를 리턴(프로미스 형태로 만들어준다)
new Promise((resolve, reject) => {
console.log('Initial');
resolve();
})
.then(() => {
throw new Error('Something failed'); // 이 라인 때문에 아래 줄이 실행되지 않고 catch로 넘어감
console.log('Do this');
})
.catch(() => {
console.log('Do that');
})
.then(() => {
console.log('Do this, whatever happened before');
});
// Initial
// Do that
// Do this, whatever happened before
Promise rejection events
reject될 때마다 아래 두 이벤트 중 하나가 전역 범위에 발생
rejectionhandled
: reject가 실행자의 reject 함수에 의해 처리된 경우
unhandledrejection
: promise가 reject 됐지만 reject 핸들러가 없을 때
promise: reject된 promise를 가리킴
reason: reject된 이유
프로미스에 대한 에러 처리를 대체(fallback)
프로미스 관리 시 발생하는 이슈들을 디버깅하는데 도움
핸들러들은 모든 맥락에서 전역적이기 때문에, 모든 에러는 발생한 지점에 상관없이 동일한 핸들러로 전달됨
timerAPI에서 then 사용하기
setTimeout(callback, ms)
내부의 callback에서 에러가 발생해도 아무것도 잡아내지 않음
Promise를 이용하여 이를 개선할 수 있음
setTimeout(() => saySomething("10 seconds passed"), 10000);
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
wait(10000).then(() => saySomething("10 seconds passed")).catch(failureCallback);
Promise.resolve( )
: 이미 resolve된 promise를 직접 생성. 뒤에 then이 연결되면 then으로 받은 함수 실행
Promise.reject( )
: 이미 reject된 promise를 직접 생성. 연결된 catch 혹은 then의 두번째 함수 실행
Promise.all(), Promise.race()
: 비동기 작업을 병렬로 실행하기 위한 두가지 구성 도구
Promise.all([func1(), func2(), func3()]) // iterable
.then(([result1, result2, result3]) => { /* use result1, result2 and result3 */ });
[func1, func2, func3].reduce((p, f) => p.then(f), Promise.resolve())
.then(result3 => { /* use result3 */ });
// 위를 재사용 가능하게 만듦
const applyAsync = (acc,val) => acc.then(val);
const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x));
// 사용 방법
const transformData = composeAsync(func1, func2, func3);
const result3 = transformData(data);
Promise.resolve().then(func1).then(func2).then(func3);
await
: Promise를 받아야 await가 의도한대로 동작함
(일반적으로 프로미스를 반환하는 API 호출 함수가 자주 쓰임)
await는 Promise가 fulfill되거나 reject될 때까지 async 함수 실행을 일시 정지시킴.
반환값은 Promise에서 fullfill된 값(resolve)
try catch문 혹은 catch메서드로 reject를 다룸
Node.js
: 비동기 이벤트 기반 JavaScript 런타임, 서버 사이드 개발에 이용
모듈을 불러오는 과정
- 브라우저
<script src="불러올 스크립트.js"> </script>
- Node.js 내장 모듈
const fs = require('fs') // 파일 시스템 모듈
const dns = require('dns') // DNS 시스템 모듈
fs 사용 예시
fs.readFile(파일이름, [인코딩 형식], 콜백 함수)
: 파일이름 string, buffer, url, integer
인코딩형식 Object, string('utf-8'등)
콜백함수 인자로 err, data를 받음(err, null/ null, data)
// 인코딩 Object 예시
{
encoding: 'utf8',
flag: 'r'
}
fs.wirte(파일이름, data, [인코딩 형식], 콜백 함수)
- 3rd-party 모듈
프로그래밍 언어에서 제공하는 빌트인 모듈(built-in module)이 아닌 모든 외부 모듈(Node.js 공식 문서에 없는 모듈)
// 터미널 install
npm install underscore
const _ = require('underscore')
22.11.23
코스 S2U3 Node.js 진행중
'코드스테이츠(SEB_FE_42)' 카테고리의 다른 글
| [JS] React Intro (0) | 2022.11.25 |
|---|---|
| [Web API] fetch API, axios 라이브러리 (0) | 2022.11.24 |
| [Web APIs] 타이머 관련 API (0) | 2022.11.22 |
| [JS] 비동기(asynchronous), callback, promise, async/ await (0) | 2022.11.22 |
| [JS] 프로토타입 체인 Prototype Chain, 상속 (0) | 2022.11.21 |

