fetch 요청 여러개 한번에 가져오기. Promise.all()

fetch API를 통해서 값을 보내고 받고 하면서 여러개의 요청들을 한번에 실행하려고 했다.

예를 들면 전체선택? 전체해제?

foreach를 통해서 요소들을 순회하며 fetch를 사용하니 요소 하나하나 적용되는 이슈가 있었다.

 

ux에 있어서도 좋지 않고 과제 작업을 하면서도 계속 신경이 쓰였다...

 

그래서 찾은 해결 방법!

Promise.all()

- 이 메서드는 순회 가능한 객체를 주어진 모든 프로미스가 이행하게 되면 그때 이행한 프로미스를 반환한다.

- 여러 프로미스의 결과를 집계할 때 사용

ex)

function exPromiseAll() {
	let arr = [1, 2, 3, 4, 5]

	arr.forEach(async(i) => {
		await fetch('url', {
    		method: "PUT"
        	headers,
       		body
    	})
    	await get비동기함수
	}
}

function exPromiseAll() {
	let arr = [1, 2, 3, 4, 5]

	const result = arr.map(async(i) => {
		await fetch('url', {
    		method: "PUT"
        	headers,
        	body
    	})
	}

	Promise.all((result).then(() => {await get비동기함수))
}

 

역시 메서드는 없는게 없다... 내가 모를뿐... 시간날때마다 mdn을 읽는 습관을 들이자...