javascript - 了解Axios创建的功能

我被要求进行API调用以发送数据。

在Click in vue中，我触发了此事件

async facebookDataToSend () {
  let campaignID = await this.$store.getters['CurrentInstance/id']
  this.$axios.post(process.env.API_BASE_URL + 'faceeBookCampaign', { campaignID: campaignID }, { withCredentials: true })
},

但是后来，我被告知要使用一些xyz.js文件中已经存在的API函数。

我的xyz.js文件如下所示。

const rest = {
  something: axios.create({
    baseURL: process.env.API_BASE_URL,
    withCredentials: true
  }),
  setClient: function (client) {
    this.something = axios.create({
      baseURL: process.env.API_BASE_URL,
      withCredentials: true,
      params: {
        __somethingClient: client
      }
    })
    this.client = client
  }
}

在这里，我无法理解如何使用此实例进行api调用，因此我查看了他们已经进行api调用的代码，并看到了类似的内容

const API = {
  url: '/whateverHtml/',
        method: 'post',
        withCredentials: true,
        data: {
          'schemaType': 'something-event', // TODO FIXME
          'field': 'description', // TODO FIXME
          'html': this.model[this.field.key]
        }
api.something.request(API).then(result => {

而且我无法理解代码。对于初学者

什么是要求？我在something变量中的rest中看不到任何方法或属性

第二，为什么已经在withCredentials: true对象中将属性设置为true的情况下，为什么在其API对象中使用rest]

使用axios.create({的专业人士有什么用，即他们比我最初使用this.$axios.post(所做的要干什么

最佳答案

request是由axios定义的方法。链接到docs。
request允许您使用所需的任何动词(POST，GET，DELETE和PUT)进行HTTP调用。最有可能的axios从所有其他帮助器方法(request，get)内部调用post，但这是一个实现细节。使用request的优点之一是您不必对HTTP动词(POST，GET ...)进行硬编码，并且可以在运行时根据输入进行设置。

我看到了为什么要设置withCredentials的两个原因:

setClient可以或可以不在something之前调用

为清楚起见:查看something的定义就足以了解客户端正在使用凭据，并且您不需要有关rest的工作原理的任何其他信息。

我不认为要求您使用something可以归结为axios.$post和axios.create的优点。这可能与如何组织代码有关。

使用单独的模块与直接调用axios相比的一些优点

当直接调用axios时，您一直都在添加基本URL，当为您的REST API使用模块时，基本URL被隐藏了，可以说使您的代码更易于阅读

，您可以在config中烘烤其他选项，并确保已使用它们。例如，您可能有一个访问 token ，该模块可以存储该 token ，并始终将其添加到任何请求中。手动致电axios时，您需要记住此

您已从axios分离(一定程度上)(1)。使用模块时，您实际上并不在乎axios是否在执行请求。

您可以向模块中添加更多API调用，以供将来重用。我期望xyz文件会随着时间增长，并且您对faceeBookCampaign的调用最终将成为rest变量上的方法。最终使用this.client而不是something更加有意义，但这取决于开发人员。

将所有REST API调用保存在一个地方，从而允许您为该API构建一个SDK，随着项目的发展，SDK可以具有自己的生命周期。

(1)我说id在某种程度上使您解耦，因为需要保留一些语义，以便一切正常。返回的对象需要具有接受配置对象的请求方法。该配置需要遵循与axios想要的结构相同的结构。但是，您始终可以为此编写一个adapter，因此实际上您已与axios分离。

关于javascript - 了解Axios创建的功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54975443/