Add Axios to your Vue app

Install axios
npm install --save axios

Then goto src/ folder and add a file called RestAPIService.js. In this file we will reside all our AXIOS interfacing code and Rest API calls.

The RestAPIService.js looks like this:

import axios from 'axios';
const API_URL = 'http://localhost:8000/api';
export class RestAPIService{

    constructor(){
    }
    async getCodes() {
        const url = `${API_URL}/v1/codes/`;
        return axios.get(url).then(response => response.data);
    }
    async getRate(from_curr, to_curr) {
        const url = `${API_URL}/v1/rates/?from_curr=${from_curr}&to_curr=${to_curr}`;
        const response = await axios.get(url).then(response => response.data);
        return response
    }
}

The Service has two methods getCodes and getRate. They hit the respective endpoints to get currency codes and conversion rate between two currencies.

Now lets use these methods to get data from the endpoints.

Since all our code making use of REST API calls reside in one Component called Content.vue, lets code it.

https://www.techiediaries.com/vue-axios-tutorial/

Tek Shinobi
Author: Tek Shinobi

Hiya Ninjas, I am the ninja who invented the fire, wheel, science, technology and everything intelligent this humanity has ever experienced since its evolution from monkeys and germs. Actually, above is a partial list. I also was involved with the Big Bang that created this universe. What was it like before the Big Bang is so secret that if I tell you, I will have to turn you into a hobbit and force you to be my gardener. Okay. Sayonanra, Namaste Tek Shinobi




No Comments


You can leave the first : )



Leave a Reply

Your email address will not be published. Required fields are marked *