web-dev-qa-db-ja.com

Axiosが作成する機能を理解する

APIを呼び出してデータを送信するように求められました。

Click in 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内にメソッドやプロパティがありません

次に、APIオブジェクトでプロパティをtrueに設定しているのに、restオブジェクトでwithCredentials: trueを使用しているのはなぜですか。

axios.create({を使用するメリットは何ですか。つまり、私が最初に行ったことよりも、彼らが何をしているのかthis.$axios.post(

javascriptvue.jsaxiosquasar
3
anny123

requestは、axiosによって定義されたメソッドです。 docs へのリンク。

requestを使用すると、任意の動詞（POST、GET、DELETE、PUT）を使用してHTTP呼び出しを行うことができます。ほとんどの場合、axiosは他のすべてのヘルパーメソッド（request、get）内からpostを呼び出しますが、これは実装の詳細です。 requestを使用する利点の1つは、HTTP動詞（POST、GET ...）をハードコーディングする必要がなく、入力に応じて実行時に設定できることです。

彼らがwithCredentialsを設定する理由は2つあります。

  • setClientはsomethingの前に呼び出される場合と呼び出されない場合があります
  • 明確にするために：クライアントが資格情報を使用していて、somethingの動作に関する追加情報は必要ないことを理解するには、restの定義を確認するだけで十分です。

somethingを使用するという要求は、axios.$postとaxios.createの利点を結集したものではないと思います。コードの編成方法に関係している可能性があります。

別のモジュールを使用することと、axiosを直接呼び出すことの利点

  • axiosを直接呼び出すときは、常にベースURLを付加します。REST APIのモジュールを使用するときは、ベースURLが隠されているため、コードが読みやすくなります。
  • config内の他のオプションをベイクして、それらが使用されていることを確認できます。たとえば、アクセストークンがある場合、モジュールはそのトークンを保存し、常にすべてのリクエストに追加できます。手でaxiosを呼び出すとき、これを覚えておく必要があります
  • axiosから（ある程度）切り離されています（1）。モジュールを使用するとき、リクエストを行うaxiosであるかどうかは実際には気にしません。
  • モジュールにAPI呼び出しを追加して、将来再利用することができます。 xyzファイルが時間とともに大きくなり、faceeBookCampaignへの呼び出しがrest変数のメソッドになることを期待しています。 somethingではなくthis.clientを使用する方が理にかなっていますが、これは開発者次第です。
  • すべてのREST API呼び出しを1か所に保持し、そのAPIのSDKを構築できるようにします。これにより、プロジェクトの成長に応じて独自のライフサイクルを持つことができます。

（1）私は、すべてが機能するように保持する必要があるセマンティクスがあるため、idはある程度あなたを切り離すと言います。返されるオブジェクトには、構成オブジェクトを受け入れるリクエストメソッドが必要です。 configは、axiosが必要とするものと同じ構造に準拠する必要があります。しかし、いつでも adapter を記述できるため、実際にはaxiosから切り離されています。

2
Radu Diță

requestここでは設定を受け取り、Promiseを返します。このアプローチは通常、createを使用して作成されたリクエストオブジェクトを再利用する場合に使用されると思います（少なくとも私の感覚では）。

requestメソッドを使用して、初期構成をAPIで定義された新しい構成で上書きすると思います。そして、二重のwithCredentialsは見落としです。または、APIは新しい構成オブジェクトを定義しているため、withCredentialsなしで定義すると、createの構成が上書きされます。

したがって、2回指定されているように見えます。

0
tyskr