Some utilities to simplify request handling on TypeScript
npm install --save typescript-request-utils
Example usage:
function Component(props: {}) {
// You must use useMemo or initialize the API elsewhere
// if api is called in a useEffect. If not, a new API
// will be initialized whenever React renders the view
// causing an infinite loop
const api = React.useMemo(() => {
const itemApi = new ItemApi();
itemApi.getItems = itemApi.getItems.bind(itemApi);
return itemApi;
}, []);
const [itemsRequest, loadItems] = useOpenApiRequest(api.getItems);
if (itemsRequest.type === OpenApiRequestStatus.Pending) {
// itemsRequest has the following fields:
// startTime
// requestPayload
return <div>{itemsRequst.startTime}</div>;
} else if (itemsRequest.type === OpenApiRequestStatus.Complete) {
// itemsRequest has the following fields:
// startTime
// requestPayload
// endTime
// responsePayload
return <div>{itemsRequest.responsePayload[0].itemName}</div>;
} else if (itemsRequest.type === OpenApiRequestStatus.NetworkError) {
// itemsRequest has the following fields:
// startTime
// requestPayload
// endTime
// error: {
// readonly message: string;
// readonly stack: string;
// }
return <div>{itemsRequest.error.message}</div>;
} else if (itemsRequest.type === OpenApiRequestStatus.ServerError) {
// itemsRequest has the following fields:
// startTime
// requestPayload
// endTime
// error: Response (fetch response)
return <div>{itemsRequest.error.status}</div>;
}
return <button onClick={loadItems}>Load items</button>;
}