Как использовать axios.request (config) в Vue.js

Question

Я пытаюсь использовать Axios в своем проекте vue.js и хочу отправить HTTP запросов. Я прочитал Axios socumentation в github и проверил множество примеров в Интернете, но не смог найти свой ответ. Я хочу определить файл конфигурации и прочитать путь запросов от него и вызвать его с помощью Axios. Есть много API, которые мне нужно вызывать, и я предпочитаю хранить их в отдельном файле. Я не хочу использовать axios.get или axios.post вместо того, чтобы предпочитать использовать этот стиль:

// 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
  }
}

В компоненте я могу получить список, но не могузнаю, как я могу позвонить GetById API.

Answer 1

Я бы предложил обернуть все остальные вызовы API следующим образом:

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);