js_프로미스

dev.dave·2023년 7월 24일

Javascript

목록 보기
37/167

//프로미스는 비동기 async러넌스 라고하죠. 비동기나 비동기 작업 때, 주로사용되는 오브젝트.
//자바스크립트 네에서는 es6떄부터 지원되는기능
//
// 함수에 콜백을 전달하는 대신에, 콜백을 프로미스 오브젝트내에 첨부를 하는 그런방식의 객체임.
//즉.,프로미스를 사용함으로써, 비동기 처리시, 성공 그리고 실패 이런식으로, 두가지 케이스로 나누어서,
//거기에 상응하는 콜백들 통해서 작업을 수행할 수 있게 도와주는 컨셉. 패턴임.
//
//resolve, reject 이 두친구가 콜백역활을 맡아서 하게됨.
//resolve (콜백) 성공 케이스 (프로미스 내에서 성공적인 작업이 완료되었을 떄, resolve를 사용할 수 있고, 컨벤션은 res라고 쓰기도 함.)
//reject (콜백) 실패 케이스 (자바스크립트가 아 reject는 자동으로, 에러발생시 호출되는 콜백이구나 라고 자동으로 알아서 처리해줌. 줄여서 rej라고도 씀.)
//
let promise = new Promise((resolve, reject) => {
// 여기공간에 어떤 코드가있으면, 뉴 프로미스 하는 시점에 바로 실행이 됨. 해서 비동기 작업을 한다.
// 즉, 이 블럭 내부에서 (임시 공간) 작업했던 결과물을 잠시 맟아주고 있다고 생각하면됨.
//즉, 잠깐 프로미스라는 공간에 잠깐 임시 보관소처럼 데이터를 맡아주고있고,
// 그래서 성공적으로 됫을때는 resolve 콜백을 통해서, 원하는 결과데이터를 밖으로 내보내 줄 수가 있고,
// 에러가 생겼다면, reject라는 콜백을 통해서, 에러를 밖으로 내보내주는 컨셉입니다.
// 프로미스에 저장되는 값은, 프로미스의 상태정보를 가지고 있습니다.
// 프로미스 같은 경우는 새로 생성이 되면, 내부적으로 상태를 가지고 있고, 그 상태 정보를 저장하고 있다,
//
});
/////////////////////////

// new Promise();
// state: "pending" -> resolve or reject;
// result: undefined; -> 'test'
//이렇게 프로미스의 내부를 뜯어보자면,
// 실제로 state 라는 상태정보를 가지고있다 치면, 펜딩(기다리는,,대기중)으로 일단 시작을 하고,
// state 는 resolve 와 reject 이렇게 상태값을 지니는 거고,
// result 같은 경우는 언디파인드로 시작을 한다. 여기는 아직 resolve, reject가 없기때매 값은 언디파인이 되는거고,
// result 는 resolve 일때(즉, 성공일떄) 값을 result 저장하고, reject 일떄(즉,실패일떄) 값을 result에 저장한다.
//
//state 는 일단 대기중이다.
// 프로미스에서 resolve를 사용하게되면, state는 fulfilled (실행) 된다.
// result 는 resolve('test') 값이 지금 test이면, result: 'test' 라고 업데이트를 해준다.
//그리고
then((result) => {}); //덴 이런 함수들을 사용해서, 우리가 결과를 받아볼수있게 한다.
// 실제로 브라우져 콘솔에 Promise 찍어보면 다 볼 수 있다. 내부상태를...
//
//reject 도,
//reject('error') 해서
// peomise.catch(error => error) 하면,

// pending 에 reject 가 들어오고,
// result : 'error' 이렇게 된다.

///////////////
// 그리고
//예를들어

let promise1 = new Promise((resolve, reject) => {
resolve("test");

reject("error");

resolve("test2");
});

//여기서 프로미스 내부에서 맨위의 resolve('test')만 실행이 되고, 밑에껀 다 무시 된다.
// 프로미스 내부에서는 하나의 성공케이스나, 하나의 실패(에러)케이스만 처리를 할 수 있다. 라는것이다.그런 방식이다.
// 그리고 상태와 결과값들은, 우리가 직접적으로 접근을 할 수 없고,
// Promise API의 퍼블릭 함수들을 통해서만 접근, 사용을 할 수 있다.
// 그 함수들은 콘솔로그 찍어보면 알수 있는데,
// catch / finally / then 을 많이 쓴다.
// 이런 함수들을 사용해서 , 결과값을 받고 처리를 할 수 있다.
///////////////////////////////

// 예를 들어서,

//셋타임함수 예제를 보자면,

// let promise2 = new Promise((resolve, reject) => {
// setTimeout(() => {
// resolve("test");
// }, 2000);
// });
// 2초 뒤에, resolve를 통해 실행, 즉 test라는 문자열을 전송해라.는 코드라면,

//then 을 굉장히 많이 쓰는데,
// then은 두가지 알규먼트를 전달한다. 첫번쨰는 성공, 두번쨰는 에러
promise2.then(
(result) => console.log(result),
(error) => console.log(error)
);
//요렇게 받아 볼수 있다.
//여기서는 result만 받아볼 수 있고, 두번쨰error까지는 실행이 안된다.
//두번째error 를 받아 보려면,

//let promise2 = new Promise((resolve, reject) => {
// setTimeout(() => {
// reject("test");
// }, 2000);
// });
//여기서 ject로 바꿔줘야,
//then에서 error 로 받아볼 수 있다.
//
//그냥 보통은
// promise2.then(
// (result) => console.log(result),
// (error) => console.log(error)
// );
//이렇게 안하고,

promise2.then((result) => console.log(result));
//이렇게 많이 한다.

//////////////////////////////////////////
//
//그럼 에러는 어떻게 하냐면,
/// 이건 안쓰는 방법이긴 한데,,,

promise.then(null, (error) => console.error(error));
// 첫번쨰가 null이라서 스킾 되고, 다음께 실행된다.(reject)
// 실무에서 쓰이진 않는다.

///////////////////////////////
// 그래서 보통은 이방법을 많이 사용한다.
//
// catch 를 많이 쓴다.
//
promise.catch((error) => console.error(error));

//이런식으로 런타임 에러를 잡을 수가 있게 됩니다.
//

/////////////////////////////////////////////////////
//그리고
//파이널리 finally() 라는 함수를 살펴보자면,
// 파이널리함수는 , 그 결과에 상관없이 무조건 실행이 된다. 라는 컨셉이다.
// 프로미스 체인의 최종단계에서, 필요에 따라 사용된다.
// 프로미스를 다 처리하고 난 뒤에, 즉, 성공이든 에러든 둘중 하나를 처리한 후에, 최종적으로 클린업을 한다던지,
// 아니면 모든 작업들을 완료한 후에, 무언가를 사용자나 시스템에게 알려야 될떄, 아니면, 상태를 리셋 해야될떄, 그럴떄 사용이 됩니다.
promise
.then((result) => console.log(result))
.finally(() => console.log("done"));
// 파이널리는 알규먼트가 없다, 즉,알규먼트를 전달받아오지 않는다.
// 파이널리에서 리턴되는 값은 없다. 자바스크립트 내에서 무시가 된다. 외부로 뭔가 하는 기능은 없다. 리턴해도 안됨.

profile
🔥개인 메모 / 다른블로그 자료 참조 / 다른블로그 자료 퍼옴 (출처표기) /여기저기서 공부 했던 내용 개인메모 & 참고 / 개인 기록 용도 블로그 입니다.🔥

0개의 댓글