All Projects → renancaraujo → axios-endpoints

renancaraujo / axios-endpoints

Licence: MIT License
Axios endpoints helps you to create a more concise endpoint mapping with axios.

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to axios-endpoints

Zl Fetch
A library that makes the Fetch API a breeze
Stars: ✭ 186 (+353.66%)
Mutual labels:  fetch, ajax, fetch-api
Php Fetch
A simple, type-safe, zero dependency port of the javascript fetch WebApi for PHP
Stars: ✭ 95 (+131.71%)
Mutual labels:  fetch, fetch-api
React Ufo
🛸 react-ufo - A simple React hook to help you with data fetching 🛸
Stars: ✭ 85 (+107.32%)
Mutual labels:  fetch, fetch-api
Wretch
A tiny wrapper built around fetch with an intuitive syntax. 🍬
Stars: ✭ 2,285 (+5473.17%)
Mutual labels:  fetch, ajax
vue-methods-promise
Let Vue methods support return Promise
Stars: ✭ 35 (-14.63%)
Mutual labels:  fetch, ajax
Frisbee
🐕 Modern fetch-based alternative to axios/superagent/request. Great for React Native.
Stars: ✭ 1,038 (+2431.71%)
Mutual labels:  fetch, fetch-api
Fetch Plus
🐕 Fetch+ is a convenient Fetch API replacement with first-class middleware support.
Stars: ✭ 116 (+182.93%)
Mutual labels:  fetch, ajax
Node Fetch
A light-weight module that brings the Fetch API to Node.js
Stars: ✭ 7,176 (+17402.44%)
Mutual labels:  fetch, fetch-api
react-sync
A declarative approach to fetching data via a React higher order component
Stars: ✭ 18 (-56.1%)
Mutual labels:  fetch, ajax
fetch
A fetch API polyfill for React Native with text streaming support.
Stars: ✭ 27 (-34.15%)
Mutual labels:  fetch, fetch-api
legible
the cleanest way to make http requests in js / node
Stars: ✭ 49 (+19.51%)
Mutual labels:  fetch, fetch-api
Wretch Middlewares
Collection of middlewares for the Wretch library. 🎁
Stars: ✭ 42 (+2.44%)
Mutual labels:  fetch, ajax
Create Request
Apply interceptors to `fetch` and create a custom request function.
Stars: ✭ 34 (-17.07%)
Mutual labels:  fetch, fetch-api
Cross Fetch
Universal WHATWG Fetch API for Node, Browsers and React Native.
Stars: ✭ 1,063 (+2492.68%)
Mutual labels:  fetch, fetch-api
Xhr.js
🌎 xhr.js is a library(< 2Kb) to make AJAX/HTTP requests with XMLHttpRequest.
Stars: ✭ 12 (-70.73%)
Mutual labels:  fetch, ajax
node-fetch-har
Generate HAR entries for requests made with node-fetch
Stars: ✭ 23 (-43.9%)
Mutual labels:  fetch, fetch-api
Fetch Suspense
A React hook compatible with React 16.6's Suspense component.
Stars: ✭ 479 (+1068.29%)
Mutual labels:  fetch, fetch-api
Unfetch
🐕 Bare minimum 500b fetch polyfill.
Stars: ✭ 5,239 (+12678.05%)
Mutual labels:  fetch, ajax
Fetch Ponyfill
WHATWG fetch ponyfill
Stars: ✭ 209 (+409.76%)
Mutual labels:  fetch, fetch-api
bestfetch
fetch ⭐️caching ⭐️deduplication
Stars: ✭ 44 (+7.32%)
Mutual labels:  fetch, fetch-api

Axios endpoints

Build Status npm

Axios endpoints helps you to create a more concise endpoint mapping with a simple but flexible api. It is as wrapper over axios.

Getting started

Before anything, install axios-endpoints

npm install --save axios #axios is a peer dependency
npm install --save axios-endpoints

Usage with Factory (recommended)

For a more complete usage of axios settings, you may use the Factory.

import axios from "axios";
import EndpointFactory from "axios-endpoints";

const axiosInstance = axios.create({
    baseURL: "https://localhost:8080/api"
});

const Endpoint = EndpointFactory(axiosInstance);

const cityEndpoint = new Endpoint("/city"); // GET https://localhost:8080/api/city
const postEndpoint = new Endpoint(({id = ""}) => "/post/" + id);

// Header changing example
function setAuthorization(MYTOKEN){
  axiosInstance.defaults.headers.common["Authorization"] = MYTOKEN;
}



function getCityList(callback) {
   cityEndpoint.get().then(response=>{
      callback(response.data);
   }).catch(e=>{
      console.log("That didnt go well");
   });
}

// do you like async stuff? so take this async example
async function getCityList(){
   try{
      const { data } = await cityEndpoint.get();
      return data;
   } catch (e) {
      console.log("That didnt go well");
   }
}

Usage without factory

The fastest way to use axios-endpoints. ideal when you dont want to set any axios configs:

// endpoints.js
import { Endpoint } from "axios-endpoints";

export const userEndpoint = new Endpoint("https://localhost:8080/api/user");


// anotherfile.js
import { userEndpoint } from "./endpoints";

async function getUserList(){
   try{
      const { data } = await userEndpoint.get();
      return data;
   } catch (e) {
      console.log("That didnt go well");
   }
}

HTTP methods

You can user either .get .post .put and .delete as well:

const cityEndpoint = new Endpoint("/city");

const { data } = await cityEndpoint.get(); // GET https://localhost:8080/api/city
const { data } = await cityEndpoint.get({
    params: {country:"brazil"}
}); // GET https://localhost:8080/api/city?country=brazil


const { data } = await cityEndpoint.post({
   name: "Hortolandia", 
   country: "Brazil", 
   hazardLevel: 10000
}, {
  params: { someParam: "icecream" }
}); 
/*
curl --request POST \  
  --url https://localhost:8080/api/city?someParam=icecream \
  --header 'Content-Type: application/json' \
  --data '{
   "name": "Hortolandia", 
   "country": "Brazil", 
   "hazardLevel": 10000
  }'
*/

uriParams

Not always your endpoint will be represented by a fixed string. For that, uri params exists.

const postEndpoint = new Endpoint(({postId = ""}) => "/post/" + postId)

const { data } = await postEndpoint.get({
   uriParams: {
      postId: 1
   }
}); // GET https://localhost:8080/api/post/1

For more information about parameters and returned values, check the API section.

API

EndpointFactory

import axios from "axios";
import EndpointFactory from "axios-endpoints"

const axiosInstance = axios.create(config);
const Enpoint = EndpointFactory(axiosInstance);

Type: function

Parameters
axiosInstance Axios instance

axiosInstance is generated via axios.create function. For more information, check axios documentation.

Return: Endpoint

Endpoint

import axios from "axios";
import EndpointFactory from "axios-endpoints"

const axiosInstance = axios.create(config);
const Enpoint = EndpointFactory(axiosInstance);

Type: class

Constructor
Constructor Parameters Type
endpointIdentifier String or Function any => String
Instance methods
endpoint#get(options)
endpoint#post(payload, options)
endpoint#put(payload, options)
endpoint#patch(payload, options)
endpoint#delete(options)
Parameters Type
options The same object as the Request Config with the extra property uriParams.
You may use params and uriParams more often.
payload The object that will be carried as json payload of the request

Contributing

If you got so far reading this README, you are maybe thinking about contributing. Pull requests are welcome.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].