alova 5

Process Response

요청이 완료된 후, 응답 데이터는 요청이 전송된 위치에서 최종 데이터를 얻기 전에 여러 프로세스를 거쳐 처리됩니다.

오류가 발생하지 않으면 다음 노드는 이전 노드의 반환 값을 받습니다.

응답 데이터 변환

메소드 인스턴스에서 우리는 이미 useHook에서 사용할 때 매우 유용한 변환(transform)에 대해 배웠습니다. 이는 useHook의 데이터가 다시 변환하지 않고, 변환된 데이터를 수신할 수 있게 해줍니다.

const todoListGetter = alovaInstance.Get('/todo/list', {
   // 이 함수는 원시 데이터 및 응답 헤더 객체를 받고, data state에 할당될 변환 데이터를 반환해야 합니다.
   // 참고: rawData는 전역 응답 인터셉터(설정된 경우)에 의해 필터링된 데이터입니다.
   transform(rawData, headers) {
     return rawData.list.map(item => ({
       ...item,
       statusText: item.done ? '완료' : '진행중'
     });
   }
});
// data value는 변환된 데이터 형식을 받습니다.
const { data } = useRequest(todoListGetter);
const { data } = useWatcher(() => todoListGetter, [userInfo]);

⚠️ usehooks에 사용될 때, transform에서 오류가 발생하면 onError도 발생합니다.

응답 콜백 바인딩

요청 콜백을 설정하려면, useHooks이 반환하는 매개변수에서 콜백 설정 함수를 받을 수도 있습니다.

const {
  onSuccess, // 성공 콜백 바인딩
  onError,   // 실패 콜백 바인딩
  onComplete // 완료 콜백 바인딩 (성공 or 실패)
} = useRequest(todoListGetter); // useWatcher에도 적용 가능

onSuccess(event => {
  console.log('요청 성공. 응답 데이터:', event.data);
  console.log('이 요청의 메소드 인스턴스:', event.method);
  console.log('응답 데이터가 캐시에서 나오는지 여부:', event.fromCache);
});
onError(event => {
  console.log('요청 실패. 오류 메시지:', event.error);
  console.log('이 요청의 메소드 인스턴스:', event.method);
});
onComplete(event => {
  console.log('요청 완료. 상태: ', event.status); // success or error
  console.log('이 요청의 메소드 인스턴스:', event.method);
  console.log('응답 데이터가 캐시에서 나오는지 여부:', event.fromCache);
  if (event.data) {
    console.log('응답 데이터:', event.data);
  } else if (event.error) {
    console.log('오류 메시지:', event.error);
  }
});

⚠️ onSuccess에서 오류가 발생하면 onError가 발생합니다.

---

🛑Abort Request

useHook을 통해 수동 중단 요청을 위한 abort를 수신합니다.
그런 다음 abort 메서드를 호출하여 요청을 중단합니다.

const { abort } = useRequest(todoListGetter);
const { abort } = useWatcher(todoListGetter, [page]);

const handleCancel = () => {
  abort();
};

[2.6.2+] 이 abort 함수는 현재 메서드 인스턴스에도 바인딩되므로 useRequest/useWatcher를 통해 전송된 요청도 이 방식으로 중단될 수 있습니다.

useRequest(todoListGetter);
useWatcher(() => todoListGetter);

// 메서드에서 abort를 호출하면 요청도 중단될 수 있습니다.
const handleCancel = () => {
  todoListGetter.abort();
};

따라서, 특정 조건이 충족되었을 때 요청을 일괄적으로 중단해야 하는 경우 beforeRequest에서 abort를 호출하여 요청을 중단할 수도 있습니다.

const alovaInst = createAlova({
  // ...
  beforeRequest(method) {
    if (someCondition) {
      method.abort();
    }
  }
});

---

⌛다운로드/업로드 진행 상황

useHook은 진행 상황 정보를 뷰에 직접 표시하기 위한 downloading/uploading을 제공합니다.

Download progress

성능상의 이유로, 기본적으로 downloading 진행 정보가 없습니다. 메서드 인스턴스의 enableDownload를 true로 설정해야 하며, 이를 통해 다운로드 프로세스 중에 downloading 상태가 지속적으로 업데이트됩니다.

const downloadGetter = alovaInstance.Get('/todo/downloadfile', {
  enableDownload: true
});
const { downloading } = useRequest(downloadGetter);

<div>파일 크기: {{ downloading.total }}B</div>
<div>다운로드됨: {{ downloading.loaded }}B</div>
<div>진행률: {{ downloading.loaded / downloading.total * 100 }}%</div>

Upload progress

동일합니다. 먼저 enableUpload를 통해 업로드 진행 정보를 활성화한 후, uploading 반응형(responsive) 상태를 수신하여 수신합니다.

const uploadPoster = alovaInstance.Post('/todo/uploadfile', formData, {
  enableUpload: true
});
const { uploading } = useRequest(uploadPoster);

<div>파일 크기: {{ uploading.total }}B</div>
<div>업로드됨: {{ uploading.loaded }}B</div>
<div>진행률: {{ uploading.loaded / uploading.total * 100 }}%</div>

---

📨 매개변수 수신

useRequest/useWatcher 모두에서 send 함수를 호출하여 요청을 수동으로 트리거할 수 있습니다.
send 함수가 요청을 트리거하면, 원하는 만큼의 매개변수가 전달될 수 있습니다.
이러한 매개변수는 실제로 다음 세 위치에서 수신될 수 있습니다.

메소드 핸들러에서 수신

첫 번째 인수가 콜백 함수로 설정된 경우 수신될 수 있으며, 이는 목록 항목을 제거할 때 종종 유용합니다.

const { send } = useRequest(
  id => removeTodoPoster(id) // id:1
);
send(1);

const { send } = useWatcher(
  userId => todoListGetter(userId), // userId:2
  [condition]
);
send(2);

이벤트 콜백 함수에서 수신

이벤트 콜백 함수에서 event.sendArgs를 통해 수신되며, 이는 send 함수의 모든 매개변수를 포함하는 배열입니다.

const { send, onSuccess, onError, onComplete } = useRequest(
  newTodo => alovaInstance.Post('/todo', newTodo)
);
onSuccess(event => {
  console.log(event.sendArgs); // [1]
});
onError(event => {
  console.log(event.sendArgs); // [1]
});
onComplete(event => {
  console.log(event.sendArgs); // [1]
});

send(1);

force 함수로 수신

force는 응답 캐시에 침투해야 하는지 여부를 지정하는 데 사용됩니다.
(응답 캐시의 내용은 나중에 Cache Mode에서 설명합니다.)

const { send } = useRequest(alovaInstance.Get('/todo'), {
  force: id => {
    return !!id;
  }
});
send(1);

const { send } = useWatcher(alovaInstance.Get('/todo'), [condition], {
  force: id => {
    return !!id;
  }
});
send(1);

---

가장 일반적으로 사용되는 useRequest 외에, 일반적으로 사용되는 기타 요청 전략은 다음과 같습니다:

• useWatcher: 데이터 변경 사항을 모니터링하고 자동으로 요청
• useForm: form 데이터 제출 및 관리
• useAutoRequest: 시간 제한 투표, 브라우저 포커싱, 네트워크 재연결 등 규칙에 따른 자동 요청