導入
かつてはAPIリクエストにXMLHttpRequestが使われていましたが、Promiseが含まれておらず、きれいなJavaScriptコードを生成できませんでした。jQueryを使えば、よりクリーンなjQuery.ajax()構文を使用できます。.
JavaScript には、API リクエストを行うための独自の組み込み方法があります。これは Fetch API と呼ばれ、Promise を使ってサーバーリクエストを行うための新しい標準ですが、追加機能も備えています。.
このチュートリアルでは、Fetch API を使用して GET リクエストと POST リクエストの両方を作成します。.
前提条件
- Node.js 用のローカル開発環境。.
- JavaScript でのコーディングに関する基本的な理解。.
- JavaScript における Promise を理解する。.
ステップ1 – Fetch API構文の使用開始
Fetch API を使用する 1 つの方法は、fetch() API URL をパラメータとして渡すことです。
fetch(url)
fetch() メソッドは Promise を返します。fetch() メソッドの後に、Promise メソッド then() を挿入します。
fetch(url)
.then(function() {
// handle the response
})返されたPromiseが解決された場合、then()メソッド内の関数が実行されます。この関数には、APIから受信したデータを処理するコードが含まれています。.
then() メソッドの後に catch() メソッドを挿入します。
fetch(url)
.then(function() {
// handle the response
})
.catch(function() {
// handle the error
});fetch() を使用して呼び出した API が壊れている、またはその他のエラーが発生している可能性があります。その場合、拒否された Promise が返されます。拒否の処理には catch メソッドが使用されます。API の呼び出し中にエラーが発生した場合、catch() 内のコードが実行されます。.
Fetch API を使用するための構文を理解したら、実際の API で fetch() を使用する手順に進むことができます。.
ステップ2 – Fetchを使用してAPIからデータを取得する
以下のコードサンプルはJSONPlaceholder APIに基づいています。このAPIを使用して10人のユーザーを取得し、JavaScriptでページに表示します。このチュートリアルでは、JSONPlaceholder APIからデータを取得し、著者リストのリスト項目に表示します。.
まず、HTML ファイルを作成し、タイトルと著者 ID を含む順序なしリストを追加します。
<h1>Authors</h1>
<ul id="authors"></ul>HTMLファイルの末尾にscriptタグを追加し、DOMセレクターを使ってulを取得します。getElementByIdを使用し、引数としてauthorsを指定します。
<h1>Authors</h1>
<ul id="authors"></ul>
<script>
const ul = document.getElementById('authors');
</script>覚えておいてください、前の ul id は著者が作成したものです。.
次に、DocumentFragment であるリストを作成します。
<script>
// ...
const list = document.createDocumentFragment();
</script>添付されたすべてのリスト項目がリストに追加されます。DocumentFragmentはアクティブなドキュメントツリー構造の一部ではありません。そのため、ドキュメントオブジェクトモデルが変更されても再描画によるパフォーマンスへの影響がないという利点があります。.
ランダムに 10 人のユーザーを返す API URL を保持する url という定数変数を作成します。
<script>
// ...
const url = 'https://jsonplaceholder.typicode.com/users';
</script>ここで、Fetch API を使用して、URL を引数として fetch() で JSONPlaceholder API を呼び出します。
<script>
// ...
fetch(url)
</script>Fetch APIを呼び出し、URLをJSONPlaceholder APIに渡しています。するとレスポンスが返されます。ただし、受け取るレスポンスはJSONではなく、情報の処理方法に応じて使用できる一連のメソッドを持つオブジェクトです。返されたオブジェクトをJSONに変換するには、json()メソッドを使用します。.
response というパラメータを持つ関数を含む then() メソッドを追加します。
<script>
// ...
fetch(url)
.then((response) => {})
</script>レスポンスパラメータは、fetch(url) から返されたオブジェクト値を受け取ります。レスポンスを JSON データに変換するには、json() メソッドを使用します。
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
</script>JSONデータはまだ処理が必要です。dataという引数を取る関数を含むthen()文をもう一つ追加します。
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {})
</script>この関数では、データと同じに設定される author という変数を作成します。
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
})
</script>authors の各著者について、名前を表示するリスト項目を作成します。このパターンには map() メソッドが適しています。
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
});
})
</script>map関数で、liという変数を作成し、createElementにli（HTML要素）を引数として設定します。また、名前用のh2要素とメールアドレス用のspan要素も作成します。
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
});
})
</script>h2要素には著者名、span要素には著者のメールアドレスが含まれます。innerHTML属性と文字列展開によって、以下のことが可能になります。
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
name.innerHTML = `${author.name}`;
email.innerHTML = `${author.email}`;
});
})
</script>次に、appendChild を使用して次の DOM 要素を追加します。
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
name.innerHTML = `${author.name}`;
email.innerHTML = `${author.email}`;
li.appendChild(name);
li.appendChild(email);
list.appendChild(li);
});
})
ul.appendChild(list);
</script>各リスト項目がDocumentFragmentリストに追加されることに注意してください。マップが完了すると、リストはul順序なしリスト要素に追加されます。.
両方のthen()関数が完了したら、catch()関数を追加できます。この関数は、発生する可能性のあるエラーをコンソールに出力します。
<script>
// ...
fetch(url)
.then((response) => {
// ...
})
.then((data) => {
// ...
})
.catch(function(error) {
console.log(error);
});
// ...
</script>作成したリクエストの完全なコードは次のとおりです。
<h1>Authors</h1>
<ul id="authors"></ul>
<script>
const ul = document.getElementById('authors');
const list = document.createDocumentFragment();
const url = 'https://jsonplaceholder.typicode.com/users';
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
name.innerHTML = `${author.name}`;
email.innerHTML = `${author.email}`;
li.appendChild(name);
li.appendChild(email);
list.appendChild(li);
});
}).
.catch(function(error) {
console.log(error);
});
ul.appendChild(list);
</script>JSONPlaceholder APIとFetch APIを使用してGETリクエストを送信できました。次はPOSTリクエストを送信します。.
ステップ3 – POSTリクエストの処理
Fetch はデフォルトで GET リクエストを使用しますが、他のリクエストタイプも使用でき、ヘッダーを変更したり、データを送信したりできます。POST リクエストを作成しましょう。.
まず、JSONPlaceholder API へのリンクを保持する定数変数を追加します。
const url = 'https://jsonplaceholder.typicode.com/users';
次に、オブジェクトを設定し、fetch関数の2番目の引数として渡します。これは、キー名がSammy（またはあなたの名前）で、値が以下のdataというオブジェクトです。
// ...
let data = {
name: 'Sammy'
}これはPOSTリクエストなので、明示的に指定する必要があります。fetchDataというオブジェクトを作成します。
// ...
let fetchData = {
}このオブジェクトには、method、body、header の 3 つのキーが含まれている必要があります。
// ...
let fetchData = {
method: 'POST',
body: JSON.stringify(data),
headers: new Headers({
'Content-Type': 'application/json; charset=UTF-8'
})
}メソッドキーの値は「POST」になります。ボディは、新しく作成されたデータオブジェクトのJSON.stringify形式に設定されます。ヘッダーの値は「Content-Type」: 「application/json; charset=UTF-8」になります。.
Headers インターフェースは、HTTP リクエスト ヘッダーとレスポンス ヘッダーに対してアクションを実行できる Fetch API の機能です。.
このコードを配置することで、Fetch API を使用した POST リクエストを送信できるようになります。URL、fetchData、および引数を Fetch POST リクエストに追加します。
// ...
fetch(url, fetchData)then() 関数には、JSONPlaceholder API から受信した応答を処理するコードが含まれています。
// ...
fetch(url, fetchData)
.then(function() {
// Handle response you get from the API
});作成したリクエストの完全なコードは次のとおりです。
const url = 'https://jsonplaceholder.typicode.com/users';
let data = {
name: 'Sammy'
}
let fetchData = {
method: 'POST',
body: JSON.stringify(data),
headers: new Headers({
'Content-Type': 'application/json; charset=UTF-8'
})
}
fetch(url, fetchData)
.then(function() {
// Handle response you get from the API
});fetch() を Request オブジェクトに渡すこともできます。.
const url = 'https://jsonplaceholder.typicode.com/users';
let data = {
name: 'Sammy'
}
let request = new Request(url, {
method: 'POST',
body: JSON.stringify(data),
headers: new Headers({
'Content-Type': 'application/json; charset=UTF-8'
})
});
fetch(request)
.then(function() {
// Handle response you get from the API
});このアプローチでは、url と fetchData の代わりに、リクエストを fetch() の唯一の引数として使用できます。.
これで、Fetch API を使用して POST リクエストを作成し実行する 2 つの方法がわかりました。.
結果
Fetch API はまだすべてのブラウザでサポートされているわけではありませんが、XMLHttpRequest の優れた代替手段となります。.
