javascript - 重用相同的 View 和逻辑，只需更改 VUE 中的端点

Question

我遇到了这样的情况:我有一堆行为相同的端点:

http:://api.development/projects/status/types

http:://api.development/projects/errors/types

http:://api.development/projects/priority/types

它们都有相同的动词:GET、POST(添加)、PUT(编辑)和 DELETE，并且共享相同的数据结构:

{
    name: "",
    description: ""
}

因此，我的客户端上的 View 和管理逻辑将是相同的。

我正在为客户端使用VUE。我考虑创建一个组件来重用 View 并创建包含该组件的其他三个组件。因此逻辑将被写入所有这三个父组件中。

但是我如何实现在它们之间重用它的逻辑呢？唯一会改变的代码是端点。

Answer 1

您可以创建一个服务文件，并在其中声明您的 API 调用，然后将该文件导出为组件并在应用程序中的任何位置重用这些调用。

它看起来像这样:

import axios from 'axios'
const api = 'API'

export default {
  data() {
    return {
      user: `${api}/some/route`,
      hotels: `${api}/other/route/`
    }
  },
  methods: {
    getHeaders() {
      return {
        headers: {
          Authorization: 'Bearer ' + 'TOKEN',
          'Content-Type': 'application/json'
        }
      }
    },
    getModule(route, cb) {
      axios
        .get(route, this.getHeaders())
        .then(response => {
          cb(response.data)
        })
        .catch(err => {
          cb(err)
        })
    },
    postModule(route, data, cb) {
      axios
        .post(route, data, this.getHeaders())
        .then(response => {
          cb(response.data)
        })
        .catch(e => {
          cb(e)
        })
    },
    putModule(route, data, cb) {
      axios
        .put(route, data, this.getHeaders())
        .then(response => {
          cb(response.data)
        })
        .catch(e => {
          console.log(e)
        })
    },
    deleteModule(route, id, cb) {
      axios
        .delete(route + id, this.getHeaders())
        .then(response => {
          cb(response.data)
        })
        .catch(e => {
          console.log(e)
        })
    }
  }
}

在要执行调用的组件中，执行以下操作:

import ServiceFileName from '@/services/YourServiceFileName'

methods:{
getData () {
      Main.methods.getModule(Main.data().hotels, data => {
        console.log(data)
      })
    }
}