XMLHttpRequestはサーバーとHTTP通信をするための方法として使われてきました。
少しまえには新しい「fetch」が登場しました。
最近ではこのfetchが使いやすくなりXMLHttpRequestよりわかりやすく書きやすいことからfetchを使う機会も多くなっていると思います。
今回は同期と非同期の違いとXMLHttpRequestとfetchの違いについて紹介していきたいと思います。
同期通信と非同期通信の違い
まずは非同期通信について理解する必要があります。
ブラウザとサーバとの通信で情報を取得をするためにはリクエストしてレスポンスを返すといったやり取りが発生します。
通常であれば同期通信というものが行われます。
たとえばWEBページの表示をするときに画像が真っ白の状態から表示されます。
この真っ白の状態のときにほかの処理を行うことはできません。
リクエストしてレスポンスを受け取るまでほかの処理ができないものが「同期通信」になります。
逆に非同期通信とはリクエストをしてレスポンスを受け取るまでのあいだにほかの処理を行うことができます。
非同期通信の例としてはyoutubeで検索して下までスクロールするとグルグルが発生してさらに下に検索結果が表示されるものやGoogleサジェストなどがあります。
非同期通信のメリットとしては同期通信のように待つ時間がなく引き続き別の処理を行えるという点です。
同期通信だとページ全体を読み込む場合だと表示までに時間がかかってしまいますね。
XMLHttpRequest（XHR）とfetchの違い
XMLHttpRequest（XHR）とは
XHRとはおもにAjax (非同期通信) で組み込むために使われるオブジェクトのことを指します。
XHRを使うことで読み込み終わったwebページからJavaScriptを使ってサーバーへリクエストを送ることができます。
サーバから情報を取得するための書き方
例）JSONPlaceHolderからデータを取得する書き方
const xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open(
'GET',
'https://jsonplaceholder.typicode.com/users/',
true
);fetchとは
そもそもfetchという言葉は「取ってくる、呼び出す、引き出す」という意味があります。
fetchは非同期通信でサーバー上にあるほしい情報を取得することができます。
ここまではXMLHttpRequestと同じです。
サーバから情報を取得するための書き方
fetch("https://jsonplaceholder.typicode.com/users")
.then(function (res) {
return res.json();
})
.then(function (users) {
console.log(users);
});
}XMLHttpRequestとfetchの違い
最近では新しく登場したfetchが使われる機会が増えていると思います。
それでは違いを見ていきましょう。
分かりやすいコード
fetchはXHRよりもコードがわかりやすく書きやすいという点があります。
リクエストを送る場合のコードだけならfetchだと1行で書くことができます。
XHRだと数行書かなくてはいけないです。
fetchの場合
fetch("https://jsonplaceholder.typicode.com/users");XMLHttpRequestの場合
var xhr= new XMLHttpRequest();
xhr.open("GET","https://jsonplaceholder.typicode.com/users");
xhr.send();fetchだと返す値がPromise
fetchは成功、失敗、取得後の処理までを一連のコードでまとめられるものはPromiseオブジェクトになります。
fetchを使えば成功と失敗したときの処理もシンプルに記述することができます。
コメント