如何在 Vue.js 中使用 axios.request(config)

Question

我想Axios在我的 vue.js 项目中使用，我想发送HTTP请求。我在 github 上阅读了Axios socumentation并在网上检查了很多示例，但我找不到我的答案。我想定义一个配置文件并从中读取请求路径并使用 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 componentimport 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  }}在组件中，我可以获得列表，但我不知道如何调用GetByIdAPI。

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