[React]axios multiple request(request 여러 개 요청하기)

프로젝트를 진행하면서 하나의 api를 여러 번 호출해서 결과를 한 번에 받고 싶었다.

getKeywordPhotos는 키워드 별로 저장된 사진을 가져오는 api이다.

키워드가 한 개가 아니라 여러 개이기 때문에 요청을 여러 번 보내야한다.

키워드마다 한 번씩 요청 하는 것보다 한 번에 요청하는게 더 효율적인 방법이라 생각해서 구글링을 해보았고

axios multiple request라는 것이 따로 있다는 걸 알아냈다!

 

//키워드 별 사진 가져오기
  const getPhoto = async (keywords, page, pageSize) => {
  try {
    const requests = keywords.map((keyword) => {
      return DiaryController.getKeywordPhotos({
        keyword: keyword,
        page: page,
        pageSize: pageSize,
      });
    });

    const responses = await axios.all(requests);

    const photos = responses.map((res) => res.data.result[0].results);
    setPhotoData(photos);
    console.log(photos);
  } catch (err) {
    console.log(err);
  }
};

keywords에는 keyword들이 저장되어 있다.

예를 들어 keywords = ["꽃", "바다", "산"]이라고 하자.

 

keywords를 map 함수를 이용해서 하나씩 꺼낸 다음에 getKeywordPhotos 요청을 보낸다.

각 키워드 별로 3번 요청을 보낸 후에, response 값들을 모두 responses에 저장한다.

 

이 때, axios.all()을 사용하는데 이 부분이 중요한 부분이다!

axios.all()은 여러 개의 요청을 병렬로 보내고 모든 결과가 반환되면 결과를 하나의 배열로 반환해준다.

결과가 반환되면 내가 필요한 데이터만 꺼내와서 photos에 저장해줬다.

 

만약 반환된 결과를 따로따로 저장해주고 싶다면 axios.spread()를 사용해줄 수 있다.

const getPhoto = async (keywords, page, pageSize) => {
 	// 같은 내용

    const responses = await axios.all(requests);

    // axios.spread() 사용
    
    const photos = await axios.spread(...responses.map(res => res.data.result[0].results));
    setPhotoData(photos);
    console.log(photos);
  } catch (err) {
    console.log(err);
  }
};

위와 같이 사용하면 같은 결과값을 가져올 수 있다.