useAsyncFetch

Use async fetch hook for requests within React components.

Installation

``console npm i async-fetch`

`Usage`

Provide a url and handle the request.

`javascript import React from "react"; import useAsyncFetch from "async-fetch";

function App() { const { pending, data, error, sendRequest, cancelRequest } = useAsyncFetch( "https://jsonplaceholder.typicode.com/todos/1", );

return ( {pending ? "Loading..." : data ? JSON.stringify(data) : error ? JSON.stringify(error) : ""} ); }

export default App;``

$3

The minimum requirement for the hook is a url string as the first argument. The second argument has the following available options, while anything else that is provided is passed to the fetch request:

| Key | Type | Definition | Default |
| -------------- | -------- | --------------------------------------------------------------------------------------------------------------- | ------- |
| initialPending | Boolean | Initial state for the pending constant. | false |
| initialError | E or Any | Initial state for the error constant. | |
| initialData | T or Any | Initial state for the data constant. | |
| auto | Boolean | Whether or not the request should send on mount. | true |
| poll | Number | Number of milliseconds to wait for polling requests. | |
| timeout | Number | Number of milliseconds to wait before canceling the request. | 30000 |
| ignoreRequest | Boolean | Whether or not the request should send. | |
| ignoreCleanup | Boolean | Whether or not the hook should cleanup on component unmount. | |
| query | Object | JSON object to append to the url as search params. | |
| params | Object | JSON object to append to the url as search params. | |
| data | Any | JSON object to send in the request body. | |
| parser | String | Method used to parse the response. Options: json, text, blob, formData, arrayBuffer. | "json" |
| onStart | Function | Callback function to call when the request starts. | |
| onSuccess | Function | Callback function to call when the response has been received. The response is available as the first argument. | |
| onFail | Function | Callback function to call when the request has failed. The error is available as the first argument. | |
| onFinish | Function | Callback function to call when the request has finished. | |

$3

| Key | Type | Definition |
| ------------- | -------- | ---------------------------------------- |
| pending | Boolean | Whether or not the request is active. |
| error | E or Any | The response error. |
| data | T or Any | The response data. |
| sendRequest | Function | Function to send the request manually. |
| cancelRequest | Function | Function to cancel the request manually. |

Usage

Provide a url and handle the request.

javascript
import React from "react";
import useAsyncFetch from "async-fetch";

function App() {
  const { pending, data, error, sendRequest, cancelRequest } = useAsyncFetch(
    "https://jsonplaceholder.typicode.com/todos/1",
  );

  return (
    
      
      

      

      
      

      

      {pending
        ? "Loading..."
        : data
        ? JSON.stringify(data)
        : error
        ? JSON.stringify(error)
        : ""}
    
  );
}

export default App;