リクエスト / Ajax

Framework7には便利なRequestライブラリが付属しており、XHRリクエスト(Ajax)をすぐに扱うことができます。

このライブラリは、Framework7クラスの request プロパティとして利用でき、初期化されたアプリのインスタンスでも同じプロパティが利用できます。

// アプリのインスタンスにアクセスできない場所や、アプリを初期化する前に必要な場合は
Framework7.request.get('somepage.html').then((res) => {
  console.log(res.data);
});


// アプリを初期化した後は、アプリのインスタンスのプロパティとしてアクセスできます。
var app = new Framework7({ /*...*/ });

app.request.get('somepage.html').then((res) => {
  console.log(res.data);
});

また、ESモジュールを使用する際にインポートすることも可能です。

import { request } from 'framework7';

request.get('somepage.html')

API

app.request(options)

options - object - リクエストパラメーター

data, xhr, status, options } オブジェクトで解決され、エラーの場合は { xhr, status, message, options }` オブジェクトで拒否される promise を返します。

Framework7.request(options)

options - object - リクエストパラメーター

data, xhr, status, options } オブジェクトで解決され、{ xhr, status, message, options }` オブジェクトでエラーが発生した場合には拒否される promise を返します。

利用可能なパラメータのリストを見てみましょう。

Parameter	Type	Default	Description
url	string		リクエストURL
async	boolean	true	同期型のリクエストが必要な場合は、このオプションを `false` に設定してください。
method	string	GET	リクエストメソッド (例: "POST", "GET", "PUT")
cache	boolean	true	falseに設定すると、リクエストされたページがブラウザにキャッシュされないようにします。キャッシュをfalseに設定すると、HEADとGETのリクエストでのみ正しく動作します。GET のパラメータに `_nocache={timestamp}` を付加することで動作します。
contentType	string	application/x-www-form-urlencoded	コンテンツタイプ。また、`multipart/form-data` や `text/plain` にすることもできます。クロスドメインのリクエストでは、コンテントタイプを application/x-www-form-urlencoded、multipart/form-data、text/plain 以外に設定すると、ブラウザはプリフライトの OPTIONS リクエストをサーバーに送信することになります。
crossDomain	boolean		同一ドメイン内でのクロスドメインリクエスト（JSONPなど）を強制的に行いたい場合は、crossDomainの値をtrueに設定してください。true`の場合、リクエストに追加の`X-Requested-With: XMLHttpRequest`ヘッダが追加されません。デフォルトでは、アプリとリクエストのホストに応じて推測しようとします。
data	object string array		サーバーに送信されるデータです。文字列になっていない場合は、クエリ文字列に変換されます。GETリクエストの場合は、URLに追加されます。この自動処理を行わないようにするには、processDataオプションを参照してください。POSTリクエストの場合は、`FormData`インスタンスになります。
processData	boolean	true	デフォルトでは、data オプションにオブジェクトとして渡されたデータ（技術的には、文字列以外のもの）は、処理されてクエリ文字列に変換され、デフォルトの content-type "application/x-www-form-urlencoded" に適合します。DOMDocumentやその他の処理されないデータを送信したい場合は、このオプションを`false`に設定してください。
dataType	string	text	サーバーから戻ってくることを期待しているデータのタイプです。text `または` json` のいずれかです。
headers	object		XMLHttpRequestトランスポートを使ったリクエストと一緒に送信する、追加のヘッダのキーと値のペアのオブジェクトです。例えば、以下のようになります。
xhrFields	object		ネイティブのXHRオブジェクトに設定するキー/値のペアのオブジェクト。
username	string		HTTPアクセス認証要求への応答として、XMLHttpRequestとともに使用されるユーザー名
password	string		HTTPアクセス認証要求に対するXMLHttpRequestで使用されるパスワード
timeout	number	0	リクエストのタイムアウト（ミリ秒単位）を設定します。
abortController	AbortController		abort controllerを渡して、リクエストを中止するオプションを持たせることができます。
Callbacks
beforeCreate	function (parameters)		渡されたパラメータを変更するために使用できるプリリクエストコールバック関数
beforeOpen	function (xhr, parameters)		XHR を開く前に呼び出されるプリリクエストコールバック関数です。XHR オブジェクトの変更に使用することができます。このコールバック関数で `return false` を指定すると、リクエストがキャンセルされます。
beforeSend	function (xhr)		XHRがオープンされた後、XHRが送信される前に呼び出されるプリリクエストコールバック関数です。XHRが開かれた後、XHRが送信される前に呼び出されるプリリクエストコールバック関数です。このコールバックを使用して、カスタムヘッダーなどを設定します。このコールバックで `return false` を指定すると、リクエストがキャンセルされます。
error	function (xhr, status, message)		リクエストが失敗した場合に呼び出される関数です。このコールバックはpromise APIでは利用できません。
success	function (data, status, xhr)		リクエストが成功した場合に呼び出される関数です。このコールバックはpromise APIでは利用できません。
complete	function (xhr, status)		リクエストが終了したとき（成功およびエラーのコールバックが実行された後）に呼び出される関数
statusCode	object		数値化されたHTTPコードと、レスポンスに対応するコードがあった場合に呼び出される関数のオブジェクトです。例えば、以下はレスポンスのステータスが404の場合にアラートを出します。 `app.request({ url: 'somepage.html', statusCode: { 404: function (xhr) { alert('page not found'); } } })`

省略可能なメソッド

Requestには、使いやすいようにあらかじめいくつかのメソッドが用意されています。すべてのメソッドは、メインの request メソッドと同じ Promise を返します。

`get()`

app.request.get(url, data, success, error, dataType)- Load data from the server using a HTTP GET request

url - string - リクエストのURL
data - object - リクエストとともにサーバーに送信されるプレーンなオブジェクトまたは文字列。オプション
success - function (data, status, xhr) - リクエストが成功した場合に実行されるコールバック関数です。Optional
error - function (xhr, status, message) - リクエストが失敗した場合に実行されるコールバック関数です。Optional
dataType - string - サーバーから返されるデータのタイプ。textまたはjson`になります。Optional

Framework7.request.get(url, data, success, error, dataType)- Load data from the server using a HTTP GET request

例：

var app = new Framework7();

var $$ = Dom7;

app.request.get('blog-post.php', { foo: 'bar', id:5 })
  .then(function (res) {
    $$('.articles').html(res.data);
    console.log('Load was performed');
  })
  .catch(function (err) {
    console.log(err.xhr)
    console.log(err.status)
    console.log(err.message)
  })

`post()`

app.request.post(url, data, success, error, dataType)- Load data from the server using a HTTP POST request

url - string - リクエストのURL
data - object - リクエストと一緒にサーバーに送信されるプレーンなオブジェクトまたはFormData、文字列。オプション
success - function (data, status, xhr) - リクエストが成功した場合に実行されるコールバック関数です。Optional
error - function (xhr, status, message) - リクエストが失敗した場合に実行されるコールバック関数です。Optional
dataType - string - サーバーから返されるデータのタイプ。textまたはjson`になります。Optional

Framework7.request.post(url, data, success, error, dataType)- Load data from the server using a HTTP POST request

例：

var app = new Framework7();

var $$ = Dom7;

app.request.post('auth.php', { username:'foo', password: 'bar' })
  .then(function (res) {
    $$('.login').html(res.data);
    console.log('Load was performed');
  });

`json()`

app.request.json(url, data, success, error)- Load JSON-encoded data from the server using a GET HTTP request

url - string - リクエストのURL
data - object - リクエストと一緒にサーバーに送信されるプレーン・オブジェクトまたはFormData、文字列。オプション
success - function (data, status, xhr) - リクエストが成功した場合に実行されるコールバック関数です。Optional
error - function (xhr, status, message) - リクエストが失敗した場合に実行されるコールバック関数です。Optional

Framework7.request.json(url, data, success, error)- Load JSON-encoded data from the server using a GET HTTP request

例：

var app = new Framework7();

app.request.json('users.json')
  .then(function (res) {
    console.log(res.data);
  });

`postJSON()`

app.request.postJSON(url, data, success, error, dataType)- Send JSON data using a HTTP POST request

url - string - リクエストのURL
data - object - プレーンなオブジェクトです。
success - function (data, status, xhr) - リクエストが成功したときに実行されるコールバック関数。Optional（オプション
error - function (xhr, status, message) - リクエストが失敗した場合に実行されるコールバック関数です。Optional
dataType - string - サーバーから返されるデータのタイプ。textまたはjsonになります。デフォルトでは json` です。Optional - オプションです。

Framework7.request.postJSON(url, data, success, error, dataType)- Send JSON data using a HTTP POST request

例：

var app = new Framework7();

var $$ = Dom7;

app.request.postJSON('http://api.myapp.com', { username:'foo', password: 'bar' })
  .then(function (res) {
    console.log(res.data);
  });

リクエスト設定

app.request.setup(options)- Set default values for future Ajax requests. Its use is not recommended

options - object - デフォルトのリクエストパラメーター

Framework7.request.setup(options)- Set default values for future Ajax requests. Its use is not recommended

例：

// 以下の設定を行うと、すべてのXHRリクエストに「Autorization」ヘッダーが追加されます。
Framework7.request.setup({
  headers: {
    'Authorization': 'sometokenvalue'
  }
})

オリジナルのリクエストパラメーター

各リクエストメソッドは、コールバックでも利用可能なプレーンなXHRオブジェクトを返します。このデフォルトのXHRオブジェクトは、次のようなプロパティで拡張されています。

xhr.requestParameters	XHR リクエストパラメータが渡されたオブジェクト
xhr.requestUrl	リクエストURLの文字列

アボートコントローラ

.request()`はPromiseを返すので、Promiseが解決または拒否される前にXHRオブジェクトにアクセスすることはできません。

この場合、特別なアボートコントローラを作成し、それをリクエストに渡すことで、将来的にそれを中止することができるようになります。

var app = new Framework7(...);

// アボートコントローラの作成
var abortController = app.request.abortController();

// リクエストの送信
app.request({
  url: 'somepage.php',
  // リクエストにアボートコントローラを渡す
  abortController: abortController,
  // ...
});

// これで、リクエストを中止することができます。
abortController.abort();