How to use axios.request(config) in Vue.js

Question

I am trying to use Axios in my vue.js project and I want to send HTTP requests. I read Axios socumentation in github and checked lots of samples on the web but I couldn't find my answer. I want to define a config file and read requests path from it and call it with Axios. There are lots of APIs that I need to call and prefer to keep it in a separate file. I do not want to use axios.get or axios.post instead of that prefer to use this style:

// in my APIs file 
export default {
  GetAll: {
    method: 'get',
    url: '/Book/GetAll'
  },
  GetById: {
    method: 'GET',
    url: 'Book/GetById/{id}'
  },
  Add: {
    method: 'POST',
    url: 'Book/Add'
  }
}

// Axios instantiation 
import Axios from 'axios'

Vue.use({
  Axios
})

const Server = Axios.create({
  baseURL: myUrl
})

export default Server

// in my component

import Server from './server'
import Api from './api'

export default {
  async mounted() {
    var list = (await Server.request(Api.GetAll)).data

    var book = (await Server.request(Api.GetById)).data
  }
}

In the component I can get the list but I don't know how I can call GetById API.

I assume what you're asking is how to implement the relevant substitution in 'Book/GetById/{id}'? Ignoring the implementation details for a second, how would you like the call from the component to look? How would you expect other things to work, like passing parameters or body data along with the request? It feels like you've picked an architecture before considering the requirements. If you can sketch out what the calls should look like for all of these relevant considerations then perhaps someone can suggest a way of implementing it. — skirtle
– skirtle, Commented Oct 19, 2019 at 0:11
@skirtle, Thank you for comment. I was using vue resource before and it was much easier to send the requests but it seems vue resource is retired now. I expect something to send get request with parameter id like Book/GetById/1 or for post request, put it in request body. I hope this can help. — Mohammad Taherian
– Mohammad Taherian, Commented Oct 20, 2019 at 13:11
I don't think that really answers my questions. I want to know what you want the code in the component to look like. You've made some design decisions already but you've left major gaps in the design. In its present form your question is too broad to provide an answer. — skirtle
– skirtle, Commented Oct 21, 2019 at 21:05
@skirtle I want to use it like await Server.request(Api.GetAll) or await Server.request(Api.GetById, 2) or something like that. — Mohammad Taherian
– Mohammad Taherian, Commented Oct 21, 2019 at 21:32

Edin Omeragic · Accepted Answer · 2019-10-18 23:08:11Z

1

I would suggest to wrap all rest api calls like this:

class RestApi {
    constructor() {
        this.client = axios.create({
            baseURL: 'base-url-here'
        });
    }

    async get(url, params = {}) {
        return this.client.request({
            type: 'get',
            url: url,
            params: params
        })
    }

    async post(url, data = {}) {
        return this.client.request({
            type: 'post',
            url: url,
            data: data
        })
    }

    async getById(id) {
        return this.get(`Book/GetById/${id}`)
    }
}

const api = new RestApi();
const response = await api.getById(1);

answered Oct 18, 2019 at 23:08

Edin Omeragic

1,9581 gold badge23 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mohammad Taherian Over a year ago

Thank you, but in this case, the get request will change to myUrl/GetById?id=1 instead of myUrl/GetById/1

Edin Omeragic Over a year ago

Each method can control how to format url, and how to pass rest of the parameters, so in case of getById, url should be /Book/GetById/1 without any query parameters.

Collectives™ on Stack Overflow

How to use axios.request(config) in Vue.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related