I have been attempting to use Axios in my vue.js project to make HTTP requests. Despite reviewing the Axios documentation on GitHub and exploring various examples online, I have yet to find a solution. My goal is to create a configuration file where I can store request paths and then utilize Axios to call them. With numerous APIs that need to be accessed, I believe keeping them in a separate file would be more efficient. Rather than using axios.get or axios.post, I would prefer to implement the following structure:
// within 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
// within 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
}
}
While I am able to retrieve the list in the component, I am unsure how to properly call the GetById API.