자바스크립트_객체지향

patch 메소드 : 기존의 데이터를 수정할 때 사용하는 메소드

                     : 새 데이터로 기존 데이터의 일부를 수정하려고 할 때 씀 → merge-patch

 

HEAD 메소드 : GET 메소드와 동일 → 헤드 부분만 받는다

 

.then 메소드 : 콜백을 실행하는 것이 아니라 등록만 함. 정작 콜백은 리스폰스가 도착했을 때 실행됨

                    : Promise 객체의 메소드 - Promise 객체가 pending → fulfilled 상태가 될 때 실행할 콜백을 등록하는 메소드

---

동기 실행 : 한 번 시작한 작업은 다 처리하고 나서야, 다음 코드로 넘어가는 방식의 실행

비동기 실행 : 한 번 시작된 작업이 완료되기 전에 바로 다음 코드로 실행이 넘어가고 나중에 콜백이 실행 됨으로써 작업이 마무리되는 것

→ 비동기 실행이 동일한 작업을 더 빠른 시간 내에 처리할 수 있음 (: 동기 실행은 리스폰스가 올 때까지 아무것도 할 수 없기 때문)

---

Fetch 함수가 리턴하는 객체 : Promise 객체

>> 이때 다른 함수들 처럼 콜백을 파라미터로 전달받지 않음 (: Promise 객체 때문)

console.log('Start!');

fetch('https://www.google.com')
	.then((response) => response.text())
    .then((result) => {console.log(result)});
    
console.log('End');

//1. console.log(Start!');
//2. fetch 함수 (: 리퀘스트 보내기 및 콜백 등록)
//3. console.log('End');
//4. 리스폰스가 오면 2에서 then 메소드로 등록해둔 콜백 실행

 

Q) 왜 이런식으로 사용할까?

A) 함수에 콜백을 직접 넣는 형식은 콜백 헬 (callback hell)이라고 하는 문제 일으킬 수 있음 (: 함수 안에 함수 안에 함수....이런 식)

---

비동기 실행되는 함수

1. setTimeout

   : 특정 함수의 실행을 원하는 시간(ms)만큼 뒤로 미루기 위해 사용하는 함수

console.log('a');
setTimeout(() => {console.log('b');}, 2000);
console.log('c');

 

2. setInterval

   : 특정 콜백을 일정한 시간 간격(ms)으로 실행되도록 등록하는 함수

 

3. addEventListener

    : DOM 객체의 메소드

    파라미터로 전달된 콜백이 당장 실행되는 것이 아니라, 나중에 특정 조건이 만족될 때마다 실행되기 때문에 비동기 실행임

---

Promise 객체

: 어떤 작업에 관한 '상태 정보'를 가지고 있는 객체

: 상태 정보 + (성공했을 경우) 작업 성공 결과 / (실패했을 경우) 작업 실패 정보

 

Promise 객체가 가지는 상태

■ pending : 진행중

■ fulfilled : 성공

■ rejected : 실패

---

Promise 객체를 리턴하는 메소드

1. text 메소드 

fetch 함수로 리스폰스를 잘 받으면, response 객체의 text 메소드는, fulfilled 상태이면서 리스폰스의 바디에 있는 내용을  string 타입으로 변환한 값을 '작업 성공 결과'로 가진 Promise 객체를 리턴

이때, 그 값이 만약 JSON 데이터라면 이전에 배운 것처럼 JSON 객체의 parse 메소드로  Deserialize를 해줘야 함 (: JSON.parse(result);)

2. json 메소드

fetch 함수로 리스폰스를 잘 받으면, response 객체의 json 메소드는, fulfilled 상태이면서, 리스폰스의 바디에 있는 JSON 데이터를 자바스크립트 객체로 Deserialize 해서 생겨난 객체를 '작업 성공 결과'로 가진 Promise 객체를 리턴

만약, 리스폰스의 바디에 있는 내용이 JSON 타입이 아니라면 에러가 발생하고 Promise 객체는 rejected 상태가 되면서 그 '작업 실패 정보'를 갖게 됨

---

Promise Chaining>

then 메소드가 여러 개일 경우 이전의 then 메소드가 실행되어야 그 다음의 then 메소드가 실행됨

Promise 객체에 메소드를 연속적으로 붙이는 것

then 메소드는 새로운 Promise 객체를 리턴함

then 메소드가 리턴한 Promise 객체는 처음에는 pending상태, 하지만 then 메소드로 등록한 콜백이 실행되고 콜백에서 값을 리턴하면 then 메소드가 리턴했던 Promise 객체가 영향을 받음 → 어떤 값을 리턴하는 지에 따라 받는 영향이 달라짐

 

■ Promise 객체를 리턴하는 경우

   콜백에서 리턴한 Promise 객체와 then 메소드가 리턴한 Promise 객체가 동일한 상태와 결과를 가지게 됨

■ Promise 객체가 아닌 값을 리턴하는 경우

   fulfilled 상태가 됨 + 해당 리턴 값을 작업 성공 결과로 가지게 됨

■ 실행된 콜백이 아무 값도 리턴하지 않는 경우

   자바스크립트에서는 함수가 아무것도 리턴하지 않으면 undefined를 리턴한 것으로 간주됨

■ 아무런 콜백도 실행되지 않을 때

   ex) rejected 상태인데 2번째 콜백이 없는 경우

 

비동기 작업을 순차적으로 수행해야할 때, 전체 코드를 좀 더 깔끔하게 나타내기 위해서 사용

---

Promise 객체가 rejected 상태가 되었을 때 실행할 콜백을 설정하고 싶다면,

    - then 메소드의 2번째 파라미터로 원하는 콜백을 넣어주면 됨

    - catch 메소드 사용 (catch 메소드 : rejected 상태가 되면 실행할 콜백을 등록하는 메소드)

      (then 메소드를 변형한 것) → catch 메소드는 가장 마지막에 사용하는 것이 좋음 (But, 작업을 살릴 방법이 있다면 promise chain 중간에 catch메소드 사용가능)

.catch((error) => {console.log(error);})

.then(undefined, (error)=>{console.log(error);})

//두 코드는 같은 의미이다

 

직접 Promise 객체를 생성

const P = new Promise((resolve, reject) => {
	// 1) setTimeout(()=>{resolve('success');}, 2000);
    // 2) setTimeout(()=>{reject(new Error('fail'));}, 2000);
});

 

Promise Chaining 안에서 비동기 실행되는 함수를 바로 사용하면, 나중에 실행되는 부분의 리턴값을 Promise Chain에서 사용할 수 없게 됨

→ 기존의 비동기 실행 함수의 콜백이 리턴하는 값을 Promise Chain에서 사용하고 싶다면, 해당 함수를 감싸서 Promise 객체를 직접 생성하는 코드를 작성해야 함

 

Promisify (프로미스화하다) : 전통적인 형식의 비동기 실행 함수를 Promise 객체로 감싸서 그 Promise 객체를 리턴하는 형식으로 만드는 작업

- 콜백을 여러 번 실행하는 함수들인 경우, promisify하면 안됨 → Promise 객체는 한 번 pending 상태에서 fulfilled 또는 rejected 상태가 되고 나면 그 뒤로는 그 상태와 결과가 바뀌지 않기 때문

 

 

이미 상태가 결정된 Promise 객체 만들기

1) fulfilled

const p = Promise.resolve('success');

 

2) rejected

const p = Promise.reject(new Error('fail'));

---

여러 개의 Promise 객체 다루기

 

1. all 메소드

: 아규먼트로 들어온 배열 안에 있는 모든 Promise 객체가 pending 상태에서 fulfilled 상태가 될 때까지 기다림 - all 메소드가 리턴했던 Promise 객체가 fulfilled 상태가 되고, 각 Promise 객체의 작업 성공 결과들로 이루어진 배열을 그 작업 성공 결과로 갖게 됨

2. race 메소드

아규먼트 :: 여러 Promise 객체들이 있는 배열 / 리턴 : Promise 객체

: race 메소드가 리턴한 Promise 객체는 아규먼트로 들어온 배열의 여러 Promise 객체들 중에서 가장 먼저 fulfilled 상태 또는 rejected 상태가 된 Promise 객체와 동일한 상태와 결과를 갖게 됨== 여러 Promise 객체들을 경쟁시켜서 가장 빨리 상태가 결정된 Promise 객체를 선택하는 메소드

 

+) allSettled 메소드 : 배열 내의 모든 Promise 객체가 fulfilled 또는 rejected 상태가 되기까지 기다리고, pending 상태의 Promise 객체가 하나도 없게 되면, A의 상태 값은 fulfilled 상태가 되고 그 작업 성공 결과로, 하나의 배열을 갖게 됨※ fulfilled 상태와 rejected 상태를 묶어서 settled 상태라고 함

 

+) any 메소드 : 여러 Promise 객체들 중에서 가장 먼저 fulfilled 상태가 된 Promise 객체의 상태와 결과가 A에도 똑같이 반영됨. 만약 모든 Promise 객체가 rejected 상태가 되어버리면 AggregateError 라고 하는 에러를 작업 실패 정보로 갖고 rejected 상태가 됨. any라는 단어의 뜻처럼 배열 속의 Promise 객체 중 단 하나라도 fulfilled 상태가 되면 됨

 

※  axios 객체에서 리퀘스트를 보내는 많은 메소드들이 fetch 함수처럼 Promise 객체를 리턴함.

---

async/await

async : 함수 안에 비동기 적으로 실행될 부분(await)이 있다는 것을 의미 → 항상 Promise 객체를 리턴

await : 그 뒤의 코드를 실행하고, 그 코드가 리턴하는 Promise 객체를 기다려줌(: 해당 객체가 fulfilled/rejected 상태가 될 때까지) + 작업 결과 추출해서 리턴 → async 함수 안에서만 사용할 수 있음

 

async 함수 안에서 리턴하는 값의 종류에 따라 결국 어떤 Promise객체를 리턴하게 되는지 달라짐

- 어떤 값을 리턴하는 경우

  ■ Promise 객체를 리턴하는 경우

     : 해당 Promise 객체와 동일한 상태와 작업 성공 결과 / 작업 실패 정보를 가진 Promise 객체 리턴

  ■ Promise 객체 이외의 값을 리턴하는 경우

     : fulfilled 상태이면서, 리턴된 값을 작업 성공 결과로 가진 Promise 객체 리턴

- 아무 값도 리턴하지 않는 경우

  : fulfilled 상태, undefined를 작업 성공 결과로 가진 Promise 객체 리턴

- Async 함수 내부에서 에러가 발생했을 때

  : rejected 상태, 해당 에러 객체를 작업 실패 정보로 가진 Promise 객체 리턴

코드의 top-level에서 async 함수가 리턴한 Promise 객체의 작업 성공 결과를 가져오려면 await을 사용할 수는 없고, 여전히 then 메소드를 사용해야함.