Axios

$HTTP From Angular Without Angular

Params handled in the url 

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (response) {
    console.log(response);
  });

 

 

Simple Requests based on Promises

axios.get('/user')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (response) {
    console.log(response);
  });

Params handled by an options object

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (response) {
    console.log(response);
  });

Multiple Requests

axios.all([getOneThing(), getAnotherThing()])
 .then(axios.spread(function(oneThingResponse, anotherThingResponse) {
    //both responses are now available
  }));

Interceptors:

Middleware to handle Request or Response Before Promise Then or Catch 

axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

 

Fetch

A polyfill of the anticpated standard to simplify XMLHttpRequest 

Simple Requests based on Promises

fetch('/users.html')
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    //do something with json
  })

Simple Requests from Forms

var form = document.querySelector('form')

fetch('/users', {
  method: 'post',
  body: new FormData(form)
})

Simple Requests with Files

var input = document.querySelector('input[type="file"]')

var data = new FormData()
data.append('file', input.files[0])

fetch('/avatars', {
  method: 'post',
  body: data
})

Will Not Reject Promise on Non-200 Statuses

fetch('/users')
  .then(checkStatus)
  .then(parseJSON)
  .then(function(data) {
    console.log('request succeeded with JSON response', data)
  }).catch(function(error) {
    console.log('request failed', error)
  })

Browser Json Client

Homebrewed to our Needs

Simple Callback Requests

var options = {
  async: true,
  data: {},
  error: function () {},
  headers: [],
  success: function () {}
};

client.get('http://youapiendpoint.com/whatever', options);

Made with Slides.com