Produced by

Department of Computing & MathematicsWaterford Institute of Technology

http://www.wit.ie

Web Application Development

David Drohan (ddrohan@wit.ie)

USING AXIOS TO CONSUME DONATION-SERVER API

Vue.jsRELATED

AxiosA PROMISE-BASED HTTP CLIENT

VUEJS - AXIOS 3

What is Axios?q Promise based HTTP client for the browser and node.js

q Features include

§ Make XMLHttpRequests from the browser

§ Make http requests from node.js

§ Supports the Promise API

§ Intercept request and response

§ Transform request and response data

§ Cancel requests

§ Automatic transforms for JSON data

§ Client side support for protecting against XSRF (Cross-Site Request Forgery, aka one-click attack)

q Supported by all Major Browsers

https://github.com/axios/axiosVUEJS - AXIOS 4

Installing

VUEJS - AXIOS 5

DonationVue & AxiosThere are many times when building applications for the web that you may want to consumeand display data from an API. Our DonationVue Web App is no exception. There are several waysto do this, but a very popular approach is to use axios, which as already mentioned, is apromise-based HTTP client.

We’ve already built the Server and Api (hosted at https://donationweb-server.herokuapp.com)which is a big help J but that isn’t always the case – most of the time all you know about theserver (with your developer hat on) is the ‘endpoints’ to ‘hit’ when requesting and/or sendingdata.

This section will take a quick look at how we interact with our Heroku node web server throughour Vue Web App and Axios.

VUEJS - AXIOS 6

DonationVue ‘Services’ Setup

VUEJS - AXIOS 7

api.js

donationservice.js

DonationWeb RevisitedLet’s remind ourselves of the Api we created (back in the day!)

VUEJS - AXIOS 8

Resource URI (structure) HTTP RequestList of Donations /donations GETGet a Single Donation /donations/{id} GETUpvote a Donation /donations/{id}/vote PUTDelete a Donation /donations/{id} DELETEUpdate a Donation /donations/{id} PUTAdd a Donation /donations/{id} POSTTotal of Donation Votes /donations/votes GET

DonationVue ‘Mapped’Here’s our client side methods mapped to the server side endpoints

VUEJS - AXIOS 9

Resource URI (structure) HTTP RequestfetchDonations() /donations GETfetchDonation(…) /donations/{id} GETupvoteDonation(…) /donations/{id}/vote PUTdeleteDonation(…) /donations/{id} DELETEputDonation(…) /donations/{id} PUTpostDonation(…) /donations/{id} POSTTotal of Donation Votes /donations/votes GET

fetchDonations()

VUEJS - AXIOS 10

fetchDonation()

VUEJS - AXIOS 11

id passed from Donations.vue

upvoteDonation()

VUEJS - AXIOS 12

getting our list again

deleteDonation()

VUEJS - AXIOS 13

sweetAlerts

putDonation()

VUEJS - AXIOS 14

postDonation()

VUEJS - AXIOS 15

setting Headers

Case StudyLABS IN ACTION

VUEJS - AXIOS 16

Demo Application

VUEJS - AXIOS 17

https://donationweb-vue.firebaseapp.com

Referencesqhttps://vuejs.org

VUEJS - AXIOS 18