[Nuxt.js] 콜백(callback) 함수를 사용하여 여러 개의 HTTP 요청(Axios) 처리하기

콜백(callback) 함수 사용 이유

하나 이상의 HTTP 요청이 필요하고 매 요청마다 처리되는(DB 저장) 순서가 중요하다면 콜백(callback) 함수를 사용해야 한다. 하나의 요청이 완료되어야 다음 요청을 시도하기 때문에 Promise.all() 함수를 사용할 때보다 시간이 더 소요된다.

콜백(callback) 함수 사용 방법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//·.vue¬
¬
export·default·{¬
····methods:·{¬
······request()·{¬
········let·url·=·"http://xxx.com/api/register"¬
········let·params·=·[¬
··········{·id:·1,·name:·"홍길동",·email:·"hong@email.com"·},¬
··········{·id:·2,·name:·"이길동",·email:·"lee@email.com"·},¬
··········{·id:·3,·name:·"김길동",·email:·"kim@email.com"·}¬
········]¬
¬
········const·send·=·async·()·=>·{¬
··········await·this.asyncForEach(params,·async·param·=>·{¬
············//·HTTP·요청·코드¬
············await·this.$axios.post(url,·param)¬
··········})¬
··········//·HTTP·요청·완료·코드¬
········}¬
········send()¬
······},¬
······async·asyncForEach(array,·callback)·{¬
········for·(let·index·=·0;·index·<·array.length;·index·+=·1)·{¬
··········await·callback(array[index],·index,·array)¬
········}¬
······}¬
····}¬
}¬
¶
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

어떤 경우에 사용해야 할까?

HTTP 요청 시 DB에 저장되는 순서가 중요하다면 콜백(callback) 함수를 사용하고 순서가 상관없다면 Promise.all() 함수를 사용하자.
콜백(callback)함수는 하나의 요청이 처리되어야 그 다음 요청을 처리하기 때문에 당연히 Promise.all() 함수를 사용하는 것보다 처리 속도가 더 오래 걸린다.

=> Promise.all() 함수를 사용하여 여러 개의 HTTP 요청(Axios) 처리하기