javascript - 了解 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 定义的方法.链接到 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 被隐藏起来，可以说让你的代码更容易阅读

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

您与 axios 解耦(在某种程度上)(1)。使用模块时，您实际上并不关心是否是 axios 执行请求。

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

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

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