axios は http 送信 Post と get を処理します

今回は、axios が http 送信 Post と get を処理する場合と、axios が http 送信 Post と get を処理する場合の notes をいくつか紹介します。以下は実際的なケースです。見てみましょう。

axios 中国語ドキュメント

https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format axios ドキュメント

http リクエストの処理に関しては、vue-resource の使用は推奨されなくなりました。代わりに、最新の axios を使用します。

インストール

ノードを使用します

npm install axios

cdn を使用します

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

基本的な使い方方法

リクエストを受け取る

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });
// Optionally the request above could also be done as
axios.get('/user', {
  params: {
   ID: 12345
  }
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

投稿リクエスト

 axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

複数のリクエストを同時に実行します

function getUserAccount() {
 return axios.get('/user/12345');
}
function getUserPermissions() {
 return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
 .then(axios.spread(function (acct, perms) {
  // Both requests are now complete
 }));

実はこれの使い方はネイティブのajaxと同じで、一目で理解できます。

application/x-www-urlencoded フォームの投稿リクエストを使用します:

var qs = require('qs');
 axios.post('/bbg/goods/get_goods_list_wechat', qs.stringify({"data": JSON.stringify({
  "isSingle": 1,
  "sbid": 13729792,
  "catalog3": 45908012,
  "offset": 0,
  "pageSize": 25
 })}), {
  headers: {
   "BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
  }
 })
 .then(function (response) {
  // if (response.data.code == 626) {
   console.log(response);
  // }
 }).catch(function (error) {
  console.log(error);
 });

具体的な使用方法の参考資料: https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format

注: 投稿リクエストの場合、通常、最初のパラメータは URL、2 番目のパラメータは送信されるリクエスト本文データ、3 番目のパラメータはリクエストの構成です。

さらに: axios のデフォルトは application/json 形式です。 qs.stringify が適用できない場合、リクエスト ヘッダーが追加された場合でも、最終的なコンテンツ タイプ形式は json のままです。

投稿リクエストの場合、次の jquery ajax を使用して実現することもできます:

    $.ajax({
     url:'api/bbg/goods/get_goods_list_wechat',
     data:{
      'data': JSON.stringify({
            "isSingle": 1,
            "sbid": 13729792,
            "catalog3": 45908012,
            "offset": 0,
            "pageSize": 25
          })    
     },  
     beforeSend: function(request) {
      request.setRequestHeader("BBG-Key", "ab9ef204-3253-49d4-b229-3cc2383480a6");
     }, 
     type:'post', 
     dataType:'json', 
     success:function(data){   
      console.log(data);
     },
     error: function (error) {
      console.log(err);
     },
     complete: function () {
     }
    });

比較すると、明らかに、jquery のリクエスト フォームの方がシンプルで、jquery のデフォルトのデータ形式は application/x-www-urlencoded であり、この点でより便利であることがわかります。

また、2 つの同一のリクエストの場合、両方のリクエストが成功したとしても、2 つのリクエストによって得られる結果は異なります

見るのは難しくありません。axios を使用して返される結果は、関連する設定、ヘッダー、リクエストなどを含む、jquery の ajax によって返される構造 (実際の結果) よりも 1 つ多いレイヤーでパックされます。

get リクエストの場合は、以下に示すように axios.get() を使用することを個人的にお勧めします。 つまり、最初のパラメータは url で、2 番目のパラメータは設定オブジェクトでパラメータを渡すことができます。

get には渡されたクエリ

文字列

として 2 番目のパラメーターがないのに、post には投稿データとして 2 番目のパラメーターがある理由を私は個人的に理解しています。 get にはクエリ文字列や get リクエストを含めることはできませんが、post には post データが必要であり、それ以外の場合は post を使用する必要がないためです。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JSでファイルをアップロードするときにプログレスバーを表示

レイヤーフロントエンドコンポーネント画像表示機能

以上がaxios は http 送信 Post と get を処理しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。