了解 Axios 创建的功能

Question

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

在 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，API当他们已经在rest对象中将属性设置为 true 时，他们为什么要在他们的对象中使用 ]

什么是专业人士的使用，axios.create({即他们正在做什么，而不是我最初做的this.$axios.post(

Answer 1

request是由 定义的方法axios。链接到文档。

request允许您使用任何您想要的动词（POST、GET、DELETE、PUT）进行 HTTP 调用。最有可能的是 axiosrequest从所有其他辅助方法（get、post）内部调用，但这是一个实现细节。使用的优点之一request是您不必对 HTTP 动词（POST、GET ...）进行硬编码，并且可以根据您的输入在运行时设置它。

我看到他们设置的两个原因withCredentials：

• setClient之前可能会或可能不会被调用something
• 为了清楚起见：查看 的定义就足以something认识到客户端正在使用凭据，并且您不需要任何有关如何rest工作的额外信息。

我不认为您使用的请求可以something归结为axios.$postvs的优点axios.create。它可能与如何组织代码更多相关。

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

• 当直接调用 axios 时，您总是在前面添加基本 url，当为 REST API 使用模块时，基本 URL 被隐藏起来，可以说使您的代码更易于阅读
• 您可以在配置中烘焙其他选项并确保它们被使用。例如，您可能有一个访问令牌，该模块可以存储该令牌并始终添加到任何请求中。当手动调用 axios 时，你需要记住这一点
• 您与 axios 解耦（在某种程度上）(1)。当使用模块时，你实际上并不关心它是否是 axios 执行请求。
• 您可以向模块添加更多 API 调用，以便将来重复使用。我预计xyz文件会随着时间的推移而增长，并且您对 to 的调用faceeBookCampaign最终会成为rest变量上的方法。最终使用this.client而不使用更有意义something，但这取决于开发人员。
• 它将所有 REST API 调用保留在一个位置，允许您为该 API 构建 SDK，随着项目的增长，它可以拥有自己的生命周期。

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