如何在 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 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

  }

}

在组件中，我可以获得列表，但我不知道如何调用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);