时间戳

首页 > 解决方案 > 了解 Axios 创建的功能

javascript - 了解 Axios 创建的功能

问题描述

我被要求进行 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变量中看不到我的任何方法或属性

第二，当他们已经在对象中将属性设置为 true 时，为什么还要在withCredentials: true对象中使用 】APIrest

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

标签： javascriptvue.jsaxiosquasar

解决方案

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

request允许您使用所需的任何动词（POST、GET、DELETE、PUT）进行 HTTP 调用。request最有可能从所有其他辅助方法（get, ）内部调用 axios 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文件会及时增长，并且您faceeBookCampaign对最终的调用将成为rest变量上的一种方法。最终使用this.client而不是更有意义，something但这取决于开发人员。
  • 它将所有 REST API 调用保存在一个地方，允许您为该 API 构建一个 SDK，随着项目的增长，它可以有自己的生命周期。

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

推荐阅读