📝 Codepen ・ 🔬 Observable ・ 📦 Npm
Ira Fetch: Vanilla JS Fetch API wrapper with goodies 🍒
Ira is a small ~ 3kb function which enhances current Fetch API with more, more goodies. Ira code isn't chopped, replaced with random chars or similar on .min.js version, it's just minified.
This goodies include debug logs, persistent settings and custom currying to request functions with a set of options. The little wrapper tries to function using current JS Engine features, no babel or typescript used. It's plain vanilla Javascript.
Npm Install
npm install irajs
Yarn Install
yarn add irajs
CDN Load
Usage
// Requiresconst ira = // Start playing aroundira
Some examples
Getting data
ira
Adding headers
ira
Parsing blob to base64 string
const blob = "something"ira
Including a base URL
const request = ira// Now you can dorequest //https://yourendpoint.com/dev/branch/binary
Extending a fork
A custom settings fork of main Ira function that's gapped to provided - config
const request = ira // Now you can make requests containing those settingsrequest // The blob response inside data obj is null
This method extends from Ira Object
The Ira Instance
RESPONSE = data: json: Object text: String blob: ?Blob } ok: Boolean status: Number statusText: String statusCode: status<Number> error: ?Error}ON_REQUEST_PROPS = headers: {} body: ?String debug: ?Boolean parseBlob: ?Boolean params: {} ...`https://developer.mozilla.org/en-US/docs/Web/API/Request`IRA_SETTINGS = headers: {} debug: Boolean parseBlob: Boolean baseURL: ?String}HTTP_METHODS = get: Function put: Function post: Function head: Function delete: Function connect: Function options: Function trace: Function // Exported object { Main }ira = ...HTTP_METHODS : HTTP_METHODSget _settings: Object config: Function extend: Function ira /* Fork with provided config */ blobToBase64: Function
Ira will return a void response if an error ocurred and status of 500.
Ira API Reference
Table of contents
- ira()
- ira.get()
- ira.post()
- ira.put()
- ira.delete()
- ira.connect()
- ira.options()
- ira.trace()
- ira.head()
- ira.blobToBase64()
- ira.on()
- ira.extend()
- ira.config()
- ira._config
- { baseURL }
- { params }
- { debug }
- { parseBlob }
HTTP Methods
This interface rules among many props and methods, ON_REQUEST_PROPS:
ira#the-ira-instance
URL = "" // Your endpoint URLCONFIG = ON_REQUEST_PROPS
The GET method, ira("/something")
is the same as fetch("/something")
. The difference is ira.get returns a Promise
which resolves to an Object including .json, .text and .blob methods.
ira().then(({data}) => { data.json | data.text | data.blob })
URL = "" // That stuff URLCONFIG = ON_REQUEST_PROPS
Same as ira()
method.
URL = "" // An endpointCONFIG = ON_REQUEST_PROPS
The POST method, ira.post("/something")
is the same as fetch("/something", { method: "POST" })
.
You can include a body doing:
ira
URL = "" // https://somethingCONFIG = ON_REQUEST_PROPS
The HTTP PUT method, ira.put("/api")
is the same as fetch("/api", { method: "PUT" })
.
You can include a body doing:
ira
You also can show some debug messages on console by adding debug: true
.
ira // This will log on request start messages and// When promise is resolved with your data
# ira.delete([URL, CONFIG]) <>
URL = "" // Place an URL hereCONFIG = ON_REQUEST_PROPS
That DELETE Http Method, ira.delete("/api")
is the same as fetch("/api", { method: "DELETE" })
.
# ira.connect([URL, CONFIG]) <>
URL = "" // The place you want data fromCONFIG = ON_REQUEST_PROPS
Doin a CONNECT method ira.connect("/api")
is same as fetch("/api", { method: "CONNECT" })
.
You can include this config on your request:
headers: {} // Your request headers body: ?String // Your request body debug: ?Boolean // if true shows some stuff on console parseBlob: ?Boolean // if false .blob event wont execute params: {} // Your URL params ?reqid=3&something=data
# ira.options([URL, CONFIG]) <>
URL = "" // That URL you want data fromCONFIG = ON_REQUEST_PROPS
When doing the OPTIONS Http method ira.options("/api")
results to be same as doing fetch("/api", { method: "OPTIONS" })
.
URL = "" // Production or dev endpointCONFIG = ON_REQUEST_PROPS
TRACE method, ira.trace("/api")
is the same as fetch("/api", { method: "TRACE" })
.
URL = "" // Some resource URLCONFIG = ON_REQUEST_PROPS
The HEAD method, ira.head("/api")
is the same as fetch("/api", { method: "HEAD" })
.
Yes, more cool methods
Blob = // A JS Binary long object
You can parse any Blob
into a base64 string by doing ira.blobToBase64
. This returns a Promise which resolves into a String. This method will always resolve if there's an error check out you console. If Promise fails will resolve to ""
Event = "request" | "response"
You can add a custom listener when ira or it's forks perform a request or when a response is succeded. You can set this triggers like this ira.on("response", callback)
.
Example:
ira ira
CONFIG = headers: {} debug: Boolean parseBlob: Boolean baseURL: ?String} // @see https://github.com/D3Portillo/ira#the-ira-instance
This method returns a new Ira instance, you can replace default Settings with your custom ones. This can be helpfull if making request to API's where headers are somewhat "persistent", for example x-api-key's or that.
Example:
const request = ira // Then you can avoid rewriting those headers again request// This will include those headers added on .extend call
CONFIG = headers: {} debug: Boolean parseBlob: Boolean baseURL: ?String} // @see https://github.com/D3Portillo/ira#the-ira-instance
This method is used to replace current ira or fork settings. This replaces .extend method stuff with those new ones you provide.
const req = ira // Now, let's pretend you want to change that baseURLreq// This will replace request's baseURL google.com with duckduck.go
Acces current config
CONFIG = headers: {} debug: Boolean parseBlob: Boolean baseURL: ?String} // @see https://github.com/D3Portillo/ira#the-ira-instance
If you want to check current ira config do ira._config
. This is supposed to be changed with ira.config()
, still you can set ira.\_config.headers = {}
._config
] props
Config[# ira._config.baseURL<Boolean> <>
You can add a baseURL to make your requests.
iraira // Fetches https://localhost:5000/anurl
# ira._config.params<Object> <>
You can add params on your request like this:
ira // Fetches to /anurl?somelikeparam=somevalue
# ira._config.debug<Boolean> <>
If true
will log stuff on console when a request is made and when a response is obtained.
# ira._config.parseBlob<Boolean> <>
If false
any request you make wont perform a response.blob and your data will resolve with this as null
Some resources
- Source: /src/index.js
- Changelog: /CHANGELOG.md
- License: /LICENSE
Ira stands for: Go-to
in spanish Ir-a
. Can also mean rage or anger, That's all the feelings you have while handling HTTP stuff : )