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/




No Comments


You can leave the first : )



Leave a Reply

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