Simple Fetch 🌐
NPM -
very-simple-fetch
Utility for easy use of the Fetch API
- Returns final (parsed to JSON, text or raw) result, including custom errors
- Uses local cache to store and retrieve results of GET-requests
- Accepts
options.paramsobject which converted to encoded search parameters - Can be cancelled (for example, if the request takes too long)
- Contains
baseUrlandauthTokensetters - Tested in Chrome, Firefox & Safari
- Tested with React & Vue
Structure of the project
- public
- scripts
- actions.js
- index.js - click handler
- utils.js - helper function for creating todo item
- index.html
- style.css
- middleware.js - custom routes for json-server
- server.js - express-server for avoiding CORS
- simpleFetch.js
- todos.json - mock data
Run of the project
git clone https://github.com/harryheman/simple-fetch.git
cd simple-fetch
# install dependencies
yarn
# or
npm i
# run json and express servers
yarn dev
# or
npm run devInstallation
yarn add very-simple-fetch
# or
npm i very-simple-fetchUsage
import simpleFetch from 'very-simple-fetch'
const getTodos = async () => {
const { data: todos, info } = await simpleFetch.get(
'https://jsonplaceholder.typicode.com/todos',
{
params: {
_limit: 10
}
}
)
console.table(todos)
console.log(JSON.stringify(info, null, 2))
const { error } = await simpleFetch('https://wrong.com')
console.error(error)
}
getTodos()Signature of the main function
simpleFetch(options: string | object)
// alias for simpleFetch.get()Signatures of helper functions
// GET
simpleFetch.get(url: string, options: object)
// or if you set base URL
simpleFetch.get(options: object)
// POST
simpleFetch.post(url: string, body: any, options: object)
// with baseUrl
simpleFetch.post(body: any, options: object)
// PUT
simpleFetch.update(url: string, body: any, options: object)
// with baseUrl
simpleFetch.update(body: any, options: object)
// DELETE
simpleFetch.remove(url: string, options: object)
// with baseUrl
simpleFetch.remove(options: object)Setting base URL
simpleFetch.baseUrl = 'https://example.com'Setting auth token
simpleFetch.authToken = token
/*
simpleFetch.headers = {
// ...
Authorization: 'Bearer [token]'
}
*/Cancellation of the request
// current (last sended) request will be cancelled
simpleFetch.cancel()
// send request
simpleFetch(url)
// retrieve id of this request
const { currentRequestId } = simpleFetch
// cancel this request
simpleFetch.cancel(currentRequestId)Options
- common
- custom:
- customCache: boolean - if
true, result of the GET-request will be stored in the local cache - Map. Result of the same request will be retrieved from this cache untilcustomCacheis set tofalse. Default value istrue - log: boolean - if
true, options, cache and result will be output to DevTools concole. Default value isfalse - params?: object - this object is converted to encoded search parameters that are appended to the URL:
- key: string
- value: string
- handlers?: object:
- onSuccess: function
- onError: function
- onAbort: function
- customCache: boolean - if
Default options
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
referrerPolicy: 'no-referrer',
customCache: true,
log: false,
signal: new window.AbortController().signal
}Response
- data: any | null - result of the request or
nullif there war an error - error: null | any -
nullor custom error - info: object:
- headers: object
- status: number,
- statusText: string
- url: string
Utility trying to send request with any arguments and return something even if an exception was thrown.