재귀 함수 + 비동기
const onSubmit = async () => {
let response = await create_customer();
if (response.status !== 200) {
return onComplete(false, '수집 되지 않은 좌표가 있습니다');
}
const invalidMutualDistanceCustomers = response.data;
response = await getMutualDistanceByTmapRecursive(invalidMutualDistanceCustomers);
try {
response = await create_route();
} catch (error) {
return onComplete(false, '경로 생성 실패');
}
return onComplete(true, '배차 완료');
};
위의 코드는 submit 버튼을 누르면 동작하는 async 함수다.
고객을 생성하고 유효하지 않은 고객들(invalidMutualDistanceCustomers 배열)을 재귀 + 비동기 함수로 처리 하려한다.
setTimeout 대신 사용할 비동기 sleep 함수
const timeout = ms => new Promise(resolve => setTimeout(resolve, ms));
재귀 함수
const getMutualDistanceByTmapRecursive = async (invalidMutualDistanceCustomers: Array) => {
const customer: Array = invalidMutualDistanceCustomers.pop();
if (customer === undefined) {
return;
}
await timeout(800);
const response = await getMutualDistanceByTmap(customer[0], customer[1]);
const totalDistance = response.data.features[0].properties.totalDistance;
const jsonMap = JSON.stringify(response.data);
await save(customer[0], customer[1], totalDistance, jsonMap);
await getMutualDistanceByTmapRecursive(invalidMutualDistanceCustomers);
}
1. 배열을 하나씩 pop 해주고 배열이 하나도 없으면(customer === undefined) 재귀 함수 종료
2. await timeout(800) : 0.8초 뒤에 api를 호출해라(api 초당 제한)
3. tmap api 호출하고 저장한 다음 다시 재귀 함수(getMutualDistanceByTmapRecursive) 호출
결론 : 비동기 처리는 까다로우니 async, await를 많이 박자
'JS' 카테고리의 다른 글
javascript es6 + Promise IE11 간단히 지원 (1) | 2021.06.11 |
---|---|
Promise 자바스크립트(js) (0) | 2019.10.18 |
loading button 쉽게 만들기(with js) (0) | 2019.10.15 |
js 화살표함수(arrow function) (0) | 2019.10.14 |
JS prototype(프로토타입) (0) | 2019.09.25 |