harryheman/simple-fetch

Fetch API Wrapper

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.params object which converted to encoded search parameters
• Can be cancelled (for example, if the request takes too long)
• Contains baseUrl and authToken setters
• Tested in Chrome, Firefox & Safari
• Tested with React & Vue

Module on NPM

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 dev

Project on CodeSanbox

Installation

yarn add very-simple-fetch
# or
npm i very-simple-fetch

Usage

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 until customCache is set to false. Default value is true
  • log: boolean - if true, options, cache and result will be output to DevTools concole. Default value is false
  • 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

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 null if there war an error
• error: null | any - null or 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.