easy-api-call
A Zero dependency npm package which is the simplified version of fetch API and axios API, build on top of Promise API compatible on both browser and servers. On browser it uses XMLHttpRequest and on node environment it uses http/https module.
Please write any issues on github if you found any. Don't hesitate to suggest any new features.
Run this command in the root of your npm project
npm i easy-api-call
import apicall from 'easy-api-call'
apicall('https://jsonplaceholder.typicode.com/posts/1')
.then((e) => console.log(e.json))
.catch((e) => console.error('Error:', e))
Sample Output:
{
userId: 1,
id: 1,
title: 'Nature is beautiful',
body: 'Nature is so beautiful. Love it! Care it! Save it!'
}
import apicall from 'easy-api-call'
apicall('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
jsonBody: {
title: 'foo',
body: 'bar',
userId: 1,
}
})
.then((e) => console.log(e.json))
.catch((e) => console.error('Error:', e))
This is the output you'll receive:
{
title: 'foo',
body: 'bar',
userId: 1,
id: 101
}
import apicall from 'easy-api-call'
const formData = new FormData()
formData.append('name', 'john doe')
formData.append('file', myFileObject)
apicall('https://api.example.com/files', {
method: 'PUT',
headers: {
'x-api-key': '123'
},
regularBody: formData,
urlSearchParams: {
renameFile: 'yes'
},
uploadProgress: (percent) => console.log(`${percent}% uploaded`)
})
.then((e) => console.log(e.statusCode, e.statusMessage, e.json))
.catch((e) => console.error('Error:', e))
function apicall(url: string, options: ApiOptions): ApiResponse {
// internal implementation
}
interface ApiOptions {
method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE' | 'OPTIONS' | 'HEAD'
regularBody?: any
jsonBody?: any
headers?: Record<string, string>
urlSearchParams?: Record<string, any>
uploadProgress?: (uploadedPercentage: number) => any
}
-
method
: Used to set the API call method as the name suggest. Default value isGET
-
regularBody
: Used to set the request body for the API call -
jsonBody
: Used to set the request body, you can directly pass JSON data. This also setscontent-type: application/json
internally in the header -
headers
: Sets the request headers for the api call, this must be an object where key and value both must be string -
urlSearchParams
: Set the request URL query (also known as URL Search Parameters) for the API call. It requires an object where key and value both must be string. This also encodes the values -
uploadProgress
: Sets a handler for upload progress updates, this requires a function where you'll be getting a value of uploadedPercentage which basically means the % value of the data uploaded. This is generally used for form data when you have provided large files and want to know the upload % at the time of uploading data to the API
interface ApiResponse {
ok: boolean
statusCode: number
statusMessage: string
headers: Record<string, string>
response: Response
json?: JSON
}
ok
: Used to indicate if API call succeeded. Returnstrue
of response status code is in between200
-299
(inclusive).
Warning: Don't trust it in case if your API is returning any status code between 300-399 range which has a success meaning. As it depends on the API implementation in most cases
-
statusCode
: The status code of the API response -
statusMessage
: The status message of the API response -
headers
: The headers of the API response. Its an object where key and value both are string -
response
: TheResponse
data which we get after doing API call. It is same as theResponse
object which we receive after callingfetch
API -
json
: Returns the json data, it will only be available if the API response returns a json body. It does so by first checking if the response header'scontent-type
value starts withapplication/json
and then parses the body usingJSON.parse