[2023-10-10] TIL - Promise, Promise 내장함수, Async, Await, Fetch

📝배운 것

1. Promise
2. then 이용
3. Promise 내장함수
4. async await
5. fetch API

 

💡알게된 것

1.Promise는 콜백헬에서 어느정도 벗어날 수 있게 해준다.

 - Promise로 정의된 작업끼리는 연결할 수 있어 코드의 Depth가 크게 증가하지 않는다.

2. Promise 사용법

const promise = new Promise((resolve, reject) =>{
	// promise 내부에서 비동기 상황이 종료될 때, resolve 함수 호출
    // promise 내부에서 오류 상황일 때, reject 함수 호출

});

3. Promise의 then내에서 promise를 return할 경우 이어진다. (promise chain)

//promise의 then사용
promise()
	.then(result=>{
    	return promise1(result)
    })
    .then(result=>{
    	return promise2(result)
    })
    .then(result=>{
    	return promise3(result)
    })

//콜백 헬
callback(result=>{
	callback(result=>{
    	callback(result=>{
        	callback(result);
        })
    })
})

- 콜백보다는 then으로 제어하기 쉽고, 보기편한 방식을 사용하는 것이 좋다.

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

 -중간에 넣든 맨 마지막에 넣든 정상적으로 동작한다.

 - catch를 안넣을 경우 에러가 발생했을 때 chain이 멈출 수 있으니 .catch문을 넣는 것이 좋다.

5. Promise의 finally는 성공과 실패 여부 상관없이 호출해야하는 코드가 있을 때 사용

6. Promise 내장함수

  - Promise.all(iterable) : 여러 Promise를 동시에 처리할 때 유용하다.

  - Promise.race(iterable) : 여러 Promise중 하나라도 resolve 혹은 reject 되면 종료됩니다.

  - Promise.any(iterable) : 여러 Promise중 하나라도 resolve 되면 종료합니다.

  - Promise.allSettled(iterable) : 여러 Promise들이 성공했거나 실패했거나 상관없이 모두 이행된 경우를 처리할 수 있습니다. (모든 Promise가 끝난 후 배열로 반환)

  - Promise.resolve : 주어진 값으로 이행하는 Promise.then 객체를 만듭니다. 주어진 값이 Promise인 경우 해당 Promise가 반환됩니다.(Promise를 return 해야하는 상황이 있는데 Promise가 아닌 값만 내보내게 되는 경우를 대비해서  return타입을 Promise로 맞춰주기 위한 함수)

즉 어떤 함수에서 값이 없으면 API를 호출하고 값이있으면 그 값을 Promise객체로 만들어서 then으로 보내주는 것이다.

  -> string이 반환되면 string에는 then을 쓸 수 가 없으니까

  - Promise.reject :  주어진 값으로 reject 처리된 Promise.then 객체를 만듭니다. 주어진 값이 Promise인 경우 해당 Promise가 반환됩니다.

---

7. async await

 - Promise가 callback depth를 1단계로 줄여주긴 하지만 여전히 불편한 것은 사실이다.

 - async await은 Promise를 동기 코드처럼 보이게 짤 수 있다. 실행은 비동기로 실행이 된다.

8. async 키워드가 붙은 함수는 실행결과를 Promise로 감싼다.

 - 즉 반환 값으로 then을 사용가능

9. async await에서 reject를 방지하기 위해서는 try catch문을 사용해야한다.

---

10. fetch API 사용방법

  - fetch의 기본 응답 결과는 Response 객체이다.

fetch("https://~~~").then(res =>{
	//받아온 데이터를 Json으로 바꿔주거나 텍스트로 바꿔줘야함
	return res.json();
}).then(todos =>{
	console.log(todos)
});

fetch로 받아온 데이터는 위처럼 오게된다. 그래서 JSON을 바꿔줘야한다.

11. 이미지 url을 fetch로 불러올 수 있다. [ blob ]

 - res.blob();

12. fetch API는 HTTP error가 발생해도 reject 되지 않음.

 - 네트워크 에러나 요청이 완료되지 못한 경우에만 reject 된다.

 - 정말로 fetch가 성공했는지를 꼭 체크해줘야한다.

 - response의 status code나 ok를 체크해주는 것이 좋다.

 - 아래와 같이 작성해주는 것이 좋음

fetch("https://...")
	.then(res =>{
    	if(res.ok) {
        	return res.json();
        }
        throw new Error("요청을 처리하지 못함");
    }).then(data =>{
    	console.log(data)
    }).catch(e=>{
    	...
    }

 - 또는 fetch의 두번째 인자로 옵션을 주면 된다

const headers = new Headers()

// 인증토큰을 약속된 이름으로
headers.append("x-auth-token","Token")

fetch("https://...",{
	method : "POST", //새로운 데이터를 추가하고 싶다면 POST
    headers,
    body.JSON.stringfy(product) // 보내고 싶은 데이터
})

☝중요한 점

1. 비동기 컨트롤을 배우기 위해 Promise를 이해하는 것이 가장 중요하다.

2. Promise와 fetch, async await 중에 어떤 것을 권장할까?

콜백지옥을 해결하기 위한 Promise

Promise를 간단하게 쓰기위한 Fetch

Promise의 사용방법을 개선하기위해  ES8에서 새롭게 소개된 비동기 처리 문법 async/await

async/await의 장점

• 일반 자바스크립트 코드가 동기적으로 실행되는 것과 같은 형태로 비동기 처리를 순차적으로 실행
• 자바스크립트의 동기적 함수/코드와 이질감이 있는 프로미스의 체인 방식 비동기 처리와 콜백 함수를 일일이 작성해야 하는 불편함이 사라짐
• Fetch보다 가독성이 좋음