Fetch APIの覚書 | ワクガンス

fetchの基本と概要

fetchは, XHR, $.ajaxなどと同様の非同期通信技術である。 2022年現在においてServiceWorkerの台頭と共に主流になっていく可能性がある。
fetchはPromiseやServiceWorkerとの相性が良いとのこと。

Demo

HTML

	<button type="button" onclick="test1()" >Test1</button><br>
	<div id="res"></div>
	

JavaScreipt

	function test1(){
		$('#res').html('abc');
		fetch("./backend.php")
		  .then(response => {
			console.log('response');
			console.log(response);
			return response.json();
		  })
		  .then(data => {
			console.log('data');
			console.log(data);
			$('#res').html(JSON.stringify(data));
		  })
		  .catch(error => {
			console.log(error);
			console.log("失敗しました");
		});
	
	}
	

PHP(backend.php)

<?php 

//データ加工や取得
$res = ['success'=>1,'yagi'=>'山羊','kani'=>'蟹','same'=>'鮫'];

// JSONに変換し、通信元に返す。
$json_str = json_encode($res, JSON_HEX_TAG | JSON_HEX_QUOT | JSON_HEX_AMP | JSON_HEX_APOS);
echo $json_str;
	

2022-5-11

xxx

2022-5-11