了解Axios创建的内容

Posted 2021-04-29

我被要求进行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(

答案

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中烘焙其他选项并确保它们被使用。例如，您可能拥有访问令牌，该模块可以存储该令牌并始终添加到任何请求中。手动调用axios时，您需要记住这一点
• 你与axios脱离（在某种程度上）（1）。使用模块时，您实际上并不关心它是否是执行请求的axios。
• 您可以向模块添加更多API调用，以便将来重用。我期待xyz文件及时增长，你对faceeBookCampaign的调用最终成为rest变量的方法。结束使用this.client而不是something更有意义，但这取决于开发者。
• 它将所有REST API调用保存在一个位置，允许您为该API构建SDK，随着项目的增长，它可以有自己的生命周期。

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

另一答案

request在这里接受一个配置并返回一个承诺。我猜这种方法通常是在你想重用一个使用create创建的请求对象时（至少我的意思）。

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

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