Vue.js

Vue.js Ajax(axios)

0 Comment0791

Vue.js 2.0バージョンでは、axiosを使用してajaxリクエストを完了することをお勧めします。

Axiosは、ブラウザとnode.jsで使用できるPromiseベースのHTTPライブラリです。

Githubオープンソースアドレス： https://github.com/axios/axios

インストール方法

cdnを使用する:

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

或は

<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

Npmを使用する:

$ npm install axios

bowerを使用する:

$ bower install axios

yarnを使用する:

$ yarn add axios

サポートしているブラウザの情報

GET メソッド

JSONデータを簡単に読み取ることができます。

GET の例

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://www.ceodata.com/files/json_demo.json')
      .then(response => (this.info = response))
      .catch(function (error) { 
        console.log(error);
      });
  }
})
コードの実行結果を確認する

response.dataを使用してJSONデータを読み取ります。

GET の例

<div id="app">
  <h1>ウェブサイトリスト</h1>
  <div
    v-for="site in info"
  >
    {{ site.name }}
  </div>
</div>
<script type = "text/javascript">
new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://www.ceodata.com/files/json_demo.json')
      .then(response => (this.info = response.data.sites))
      .catch(function (error) { // リクエストが失敗した
        console.log(error);
      });
  }
})
</script>
コードの実行結果を確認する

GETメソッドによって渡される引数の構文は次のとおりです。

渡される引数の説明

// 引数ID=12345をURLに追加する。
axios.get('/user?ID=12345') 
.then(function (response) { 
console.log(response); 
}) 
.catch(function (error) { 
console.log(error); 
}); 
// paramsを使用して引数を設定できできる。 
axios.get('/user', { 
params: { 
ID: 12345 
} 
}) 
.then(function (response) { 
console.log(response); 
}) 
.catch(function (error) { 
console.log(error); 
});

POST メソッド

POST の例

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .post('https://www.ceodata.com/files/post_demo.php')
      .then(response => (this.info = response))
      .catch(function (error) { // リクエストが失敗した
        console.log(error);
      });
  }
})
コードの実行結果を確認する

POSTメソッドによって渡される引数の構文は次のとおりです。

渡される引数の説明

axios.post('/user', { 
firstName: 'Fred', // 引数 firstName 
lastName: 'Flintstone' // 引数 lastName 
}) 
.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) { 
// 両方のリクエストが実行された 
}));

axios API

リクエストは、関連する構成をaxiosに渡すことで作成できます。

例

axios(config) 
// POSTリクエストを送信する 
axios({ 
method: 'post', 
url: '/user/12345', 
data: { 
firstName: 'Fred', 
lastName: 'Flintstone' 
} 
}); 
// GETでリモート画像をリクエストする 
axios({ 
method:'get', 
url:'http://www.ceodata.com', 
responseType:'stream' 
}) 
.then(function(response) { 
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg')) 
}); 
axios(url[, config]) 
//GETリクエストを送信する（デフォルト） 
axios('/user/12345');

リクエストメソッドの別名

使いやすさのために、オフィシャルはサポートされているすべてのリクエストメソッドの別名を提供しています。別名を直接使用してリクエストを開始できます。

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

注意点：別名メソッドを使用する場合、構成でuurl、method、data属性を指定する必要はありません。

同時

同時にリクエストを処理するためのヘルパー関数：

axios.all(iterable)
axios.spread(callback)

インスタンスを作成する

カスタム構成で新しいaxiosインスタンスを作成できます。

axios.create([config])
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

インスタンスメソッド

次のインスタンスメソッドを使用できます。指定された構成は、インスタンス構成とマージされます。

axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])

リクエストのオプション構成

リクエストの作成時に使用できるオプション構成は次のとおりです。必要なのはurlのみであることに注意してください。methodが指定されていない場合、リクエストはデフォルトでgetメソッドを使用します。

{
  // `url`はリクエストに使用されるサーバーURLである
  url: "/user",

  // `method`はリクエストを作成する時に使用されるメソッドである
  method: "get", // デフォルトは getである

  // `url`が絶対URLでない限り、` baseURL`は `url`の前に自動的に追加されます。
  // `baseURL`を設定することにより、axiosインスタンスのメソッドが相対URLを渡すことができます。
  baseURL: "https://some-domain.com/api/",

  // `transformRequest` はサーバーに送信する前にリクエストデータを変更できる
  // "PUT"、"POST"、"PATCH"、この3つのリクエストメソッドでのみ使用できる
  // 次の配列の関数は、文字列、ArrayBuffer、またはStreamを返す必要がある
  transformRequest: [function (data) {
    // dataに任意の変換処理を実行する

    return data;
  }],

  // `transformResponse` はthen/catchに渡す前に、応答データの変更を許可する
  transformResponse: [function (data) {
    // dataに任意の変換処理を実行する

    return data;
  }],

  // `headers` はまもなく送信されるカスタムリクエストヘッダーである
  headers: {"X-Requested-With": "XMLHttpRequest"},

  // `params` はリクエストとともに送信されるURL引数である
  // プレーンオブジェクト(plain object)またはURLSearchParamsオブジェクトである必要がある
  params: {
    ID: 12345
  },

  // `paramsSerializer` は`params`のシリアル化を担当する関数である
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: "brackets"})
  },

  // `data` データはリクエストの主体として送信される
  //"PUT"、"POST"、または"PATCH"、この3つのリクエストメソッドにのみ適用される
  // `transformRequest`が設定されていない場合、次のいずれかのタイプである必要がある：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - ブラウザ専用：FormData, File, Blob
  // - Node専用： Stream
  data: {
    firstName: "Fred"
  },

  // `timeout`リクエストがタイムアウトするミリ秒数を指定する（0はタイムアウトがないことを意味する）
  //リクエストに `timeout`より長い時間がかかる場合、リクエストは中断される
  timeout: 1000,

  // `withCredentials` クロスドメインリクエストに資格情報が必要かどうかを示す
  withCredentials: false, // デフォルト

  // `adapter` リクエストのカスタム処理を可能にして、テストを容易にする
  // promiseを返し、有効な応答を適用する (検索 [response docs](#response-api)).
  adapter: function (config) {
    /* ... */
  },

  // `auth` HTTP基本認証を使用し、資格情報を提供する必要があることを示す
  // これより、 `Authorization`ヘッダーが設定され、`headers`で設定された既存のカスタム `Authorization`ヘッダーが上書きされる。
  auth: {
    username: "janedoe",
    password: "s00pers3cret"
  },

  // `responseType` サーバー応答のデータタイプを示す。 "arraybuffer", "blob", "document", "json", "text", "stream"である。
  responseType: "json", // デフォルト

  // `xsrfCookieName` はxsrf tokenの値として使用されるCookieの名前である
  xsrfCookieName: "XSRF-TOKEN", // default

  // `xsrfHeaderName` はxsrf tokenの値を運ぶHTTPヘッダーの名前である
  xsrfHeaderName: "X-XSRF-TOKEN", // デフォルト

  // `onUploadProgress` アップロードの進行状況イベントの処理を許可する
  onUploadProgress: function (progressEvent) {
    // ネイティブプログレスイベントの処理
  },

  // `onDownloadProgress` ダウンロードのプログレスイベントを処理できる
  onDownloadProgress: function (progressEvent) {
    // ネイティブプログレスイベントの処理
  },

  // `maxContentLength` 許可される応答内容の最大サイズを定義する
  maxContentLength: 2000,

  // `validateStatus` は特定のHTTP応答ステータスコード resolve 或は reject  promiseを定義する。`validateStatus` が`true`を返す場合(又は `null` 、 `undefined`に設定される場合)、promise は resolveになる; それ以外、promise はrejecteになる
  validateStatus: function (status) {
    return status &gt;= 200 &amp;&amp; status &lt; 300; // デフォルト
  },

  // `maxRedirects`node.jsにあるfollowのリダイレクトの最大数を定義する
  // 0に設定すると、任意のリダイレクトにfollowしない
  maxRedirects: 5, //  デフォルト

  // `httpAgent`と` httpsAgent`はnode.jsで使用され、それぞれhttpとhttpsの実行時に使用されるカスタムエージェントを定義する。このような構成オプションを許可する：
  // `keepAlive`  はデフォルトで無効にする
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // "proxy" プロキシサーバーのホスト名とポートを定義する
  // `auth` はHTTP基本認証を使用してプロキシに接続し、資格情報を提供する必要があることを示す
  // これより、 `Proxy-Authorization`ヘッダーが設定され、` header`を使用して設定された既存のカスタム `Proxy-Authorization`ヘッダーが上書きされる。
  proxy: {
    host: "127.0.0.1",
    port: 9000,
    auth: : {
      username: "mikeymike",
      password: "rapunz3l"
    }
  },

  // `cancelToken`は、リクエストのキャンセルに使用されるcancel tokenを指定する
  // （詳細については、下記の[Cancellation]を参照してください）
  cancelToken: new CancelToken(function (cancel) {
  })
}

応答構造

axiosリクエストへの応答には、次の情報が含まれています。

{
  // `data` サーバーから提供された応答である
  data: {},

  // `status`  HTTP ステータスコード
  status: 200,

  // `statusText` サーバー応答からのHTTPステータスの情報である
  statusText: "OK",

  // `headers` サーバー応答ヘッダー
  headers: {},

  // `config` リクエストに対する提供された構成情報である
  config: {}
}

thenを使用すると、次の応答が返されます。

axios.get("/user/12345")
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

catchを使用する場合、またはthenの2番目の引数としてrejection callbackを渡す場合、errorオブジェクトで応答を使用できます。

構成済みのデフォルト値

各リクエストで使用される構成のデフォルト値を指定できます。

グローバルaxiosのデフォルト値

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

インスタンスのデフォルト値をカスタマイズする

// インスタンスを作成するときに構成のデフォルト値を設定する
var instance = axios.create({
  baseURL: 'https://api.example.com'
});
//インスタンスを作成した後、デフォルト値を変更する
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

構成の優先順位

構成は優先順位でマージされます。順序はlib/defaults.jsにあるライブラリのデフォルト値を見つけ→インスタンスのdefaults属性→リクエストのconfig引数です。後者が前者よりも優先されます。次には例を挙げます。

// ライブラリによって提供される設定のデフォルト値を使用して、インスタンスを作成する
//この場合のタイムアウト設定のデフォルト値は `0`である
var instance = axios.create();

// ライブラリのタイムアウトのデフォルト値を上書きする
// 現在、タイムアウトになる前に、すべてのリクエストは2.5を待つ
instance.defaults.timeout = 2500;

// 時間がかかることがわかっているリクエストのタイムアウト設定を上書きする
instance.get('/longRequest', {
  timeout: 5000
});

インターセプター

リクエスト又は応答がthen 或は catchに処理される前にキャッチします。

// リクエストインターセプターを追加する
axios.interceptors.request.use(function (config) {
    // リクエストを送信する前に実行するコードをここに追加する
    return config;
  }, function (error) {
    // リクエストエラーに対して実行するコードをここに追加する
    return Promise.reject(error);
  });

// 応答インターセプターを追加する
axios.interceptors.response.use(function (response) {
    // 応答データに対して実行するコードをここに追加する
    return response;
  }, function (error) {
    // 応答エラーに対して実行するコードをここに追加する
    return Promise.reject(error);
  });

後でインターセプターを削除する場合は、次のようにします。

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

カスタムaxiosインスタンスのインターセプターを追加できます。

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

エラー処理：

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // リクエストは送信されたが、サーバーの応答ステータスコードが2xxの範囲ではない
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

validateStatusオプションを使用して、カスタムHTTPステータスコードエラー範囲を定義できます。

axios.get('/user/12345', {
  validateStatus: function (status) {
    return status < 500; // ステータスコードが500以上の場合にのみ拒否する
  }
})

キャンセル

cancel tokenを使用してリクエストをキャンセルします。

Axiosのcancel token APIは、cancelable promises proposalに基づいています。

次のように、CancelToken.sourceファクトリメソッドを使用してcancel tokenを作成できます。

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // エラー処理
  }
});

// リクエストをキャンセルする（message引数はオプションである）
source.cancel('Operation canceled by the user.');

executor関数をCancelTokenコンストラクターに渡すことにより、cancel tokenを作成することもできます。

var CancelToken = axios.CancelToken;
var cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor関数は、cancel関数を引数として受け取る
    cancel = c;
  })
});

// リクエストをキャンセルする
cancel();

注意点：同じcancel tokenを使用して、複数のリクエストをキャンセルできます。

リクエストの場合application/x-www-form-urlencodedを使用してください

axiosは、デフォルトでJavaScriptオブジェクトをJSONとしてシリアル化します。application/x-www-form-urlencodedという構文を使用する場合、次の構成を使用できます。

ブラウザ

ブラウザ環境では、URLSearchParamsAPIを使用できます。

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

URLSearchParamsは、すべてのブラウザにサポートされていません。

さらに、qsライブラリを使用してデータをエンコードできます。

const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

// Or in another way (ES6),

import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

Node.js環境

node.jsでは、querystringモジュールを使用できます。

const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));

もちろん、ブラウザと同様に、qsライブラリを使用することもできます。

Promises

axiosは、サポートされるネイティブES6 Promise実装に依存しています。

ご使用の環境がES6 Promiseをサポートしていない場合、polyfillを使用できます。

TypeScriptサポート

axiosには、TypeScriptの定義が含まれています。

import axios from "axios";
axios.get("/user?ID=12345");
Share
Vue.js トランジション&アニメーション Previous post

Related Articles

Vue.js

Vue.jsの例
Vue.js

Vue.js トランジション&アニメーション
Vue.js

Vue.js応答インターフェース
Vue.js

Vue.js Ajax(vue-resource)

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

DMCA.com Protection Status
© Copyright 2020-2024 https://www.ceodata.com