fetch()を使って簡単に非同期通信をする方法!

  • このエントリーをはてなブックマークに追加
javascript-fetch

fetch()を使うことで、外部ライブラリを使用しなくても簡単に非同期通信を実現することができます。
今やWeb開発で非同期通信を使わない方が珍しくなってきました。。実装する場合、あなたは何を使っていますか?jQueryなどを使う場合も多いと思いますが、そのためだけにjQuery使うのもなんかな〜。なんて思ったりしますよね。。

そんな時に、fetch()を使うことで、外部ライブラリを使わずに実現することができます。それでは、紹介していきますね!

fetch()の概要

fetch()の詳細情報はこちら
fetch()メソッドの概要は、以下の通り。

GlobalFetch インターフェイスの fetch() メソッドはネットワークからリソースの fetch (取得) を開始します。このメソッドはリクエストのレスポンスを表す Response オブジェクトの Promise を返します 。

上記の引用を簡単に言うと、「fetch()メソッドでデータを取得します。そして、そのレスポンスはとしてPromiseを返します」ということです。Promiseについてはこちらを参照!

基本的な使い方

実装例を使いながら解説していきます。
まずは、GETリクエストでJSONデータを取得する場合。

// データの取得先
const url = 'http://localhost:3000/user_info';

// リクエストのヘッダー情報
const header = new Headers();
header.append('Content-Type', 'application/json');

// リクエストの初期化オプション
const init = { method: 'GET',
               headers: header,
               mode: 'cors', // Originを超えたアクセスを許可する。
               cache: 'default'};

// リクエストの作成
var request = new Request(url);

// 非同期通信の処理
fetch(request, init)
.then(function(response) {
  // Responseを完全に読み込む
  return response.blob();
})
.then(function(response) {
  // レスポンスのJSONデータを表示する
  console.log(response.body);
});

お次は、POSTリクエストでJSONデータを追加する場合。

// データの取得先
const url = 'http://localhost:3000/user_info';

// リクエストのヘッダー情報
const header = new Headers();
header.append('Content-Type', 'application/json');

// リクエストの初期化オプション
const init = { method: 'POST',
               headers: header,
               mode: 'cors',
               cache: 'default'};

// リクエストの作成
var request = new Request(url);

// 非同期通信の処理
fetch(request, init)
.then(function(response) {
  // Responseを完全に読み込む
  return response.blob();
})
.then(function(response) {
  // レスポンスのJSONデータを表示する
  console.log(response.body);
});

まとめ

いかがでしたか?思っていたよりも簡単に非同期通信をすることができたと思います。是非使ってみてください!

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*