[Promise] 반복문에서 Promise 가 성공일 때만 반복문 진행시키기

일반적인 반복문에서 async 로 만들어진 함수가 성공했을 때 콜백 함수 같이, 다음 반복문을 실행시키는 로직을 
만들어보자.

일반적인 방법으로 사용하면, 앞쪽 Promise 함수가 다 완료된 이후에 다음 Promise 가 실행되리란 보장을 못합니다
여러개가 동시에 실행이 되는 상황이 벌어지죠.

먼저 async 로 만들어진 다음과 같은 함수가 있다고 가정합시다.

export const axiosFunction = async (formData: FormData) => {
	const response = await axios.post(
		'url',
		formData,
		{
			headers: {
				'Content-Type': 'multipart/form-data',
			},
		},
	)
	return response
}

처음에 말한 상황은 바로 아래와 같은 상황입니다.
일반적인 반복문에 async 를 호출하면 보장을 할 수 없습니다.

// this is wrong code
for (let i = 0; i < list.length; i++) {    
    const formData = new FormData()
    formData.append('title', list[i])    
    axiosFunction(formData)    
}

순차적으로 실행하고 싶다면 외부함수를 이용해야 합니다.
먼저 빈배열하나를 선언합니다.
반복문에서 그 배열에 함수를 담습니다. ( 호출된 값이 아닌 함수만을 담습니다. )
파라미터로 전달 할 데이터가 있다면 그 또한 배열에 담습니다.

const something: Function[] = []
const somethingParamsData: FormData[] = []

for (let i = 0; i < list.length; i++) {    
    const formData = new FormData()
    formData.append('title', list[i])    
    axiosFunction(formData)    
    something.push(setVisitProduct)
    somethingParamsData.push(formData)
}

외부함수를 작성합니다.

/**
 * 순차실행을 위한 외부함수
 * @param params 함수function 배열
 * @param data 함수에 받는 파라미터 배열
 */
const callBack = async (params: Function[], data: FormData[]) => {
    for (let i = 0; i < params.length; i++) {
        await params[i](data[i])
    }
}

외부함수를 호출합니다.

const something: Function[] = []
const somethingParamsData: FormData[] = []

for (let i = 0; i < list.length; i++) {    
    const formData = new FormData()
    formData.append('title', list[i])    
    axiosFunction(formData)    
    something.push(setVisitProduct)
    somethingParamsData.push(formData)
}

callBack(something, somethingParamsData).then(res => {
	// 반복문 순차실행이 끝난 후에도 할일이 있다면 여기에서...
})

짜잔! 반복문에서 순차실행을 할 수 있게 되었습니다.

* 중간에 중단해야한다면, Promise 함수에서 각각처리해야합니다.
 -> Promise 를 직접써서 함수를 만들었다면 함수 내에서 reject 을 호출하고,
     async 로 만들었다면 throw 로 예외를 발생시킵니다.