了解 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 })
},

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

我的 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 => {

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

什么是请求？我在 rest 变量

的 something 中没有看到我的任何方法或属性

其次，当他们已经在 rest 对象中将属性设置为 true 时，为什么他们在 API 对象中使用 withCredentials: true]

使用 axios.create({ 的优点是什么，即他们所做的与我最初所做的相比 this.$axios.post(

Answer 1

request 这里接受一个配置和 returns 一个承诺。我猜想重用使用 create 创建的请求对象时通常会采用这种方法（至少我是这么认为的）。

我觉得 request 方法用于用 API 中定义的新配置覆盖初始配置。而且，双 withCredentials 应该是一个疏忽。或者，因为 API 正在定义一个新的配置对象，因此当在没有 withCredentials 的情况下定义时，它将覆盖 create 的配置。

因此，它看起来像是指定了两次。

Answer 2

request是axios定义的方法。 Link 到 docs.

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

我看到他们设置 withCredentials:

的两个原因

setClient 可能会或可能不会在 something
为清楚起见：查看 something 的定义就足以了解客户端正在使用凭据，您不需要任何有关 rest 工作原理的额外信息。

我不认为要求您使用 something 归结为 axios.$post 与 axios.create 的优势。它可能更多地与如何组织代码有关。

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

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

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

了解 Axios 创建的内容

Understanding what does Axios create do

javascript

vue.js

quasar

axios