fetch - Javascript

fetch()メソッドとは

fetch()メソッドは、非同期通信でリクエストを発行し、そのレスポンスを取得することができます。

同期 XHR は非推奨な為、XMLHttpRequest ではなくfetch()メソッドを代わりに使用したほうがいいと思われます。

fetch()メソッドの戻り値は、Promiseオブジェクトを返します。

json ファイルを取得する

script.js

window.onload = function(){
  fetch("./data.json")
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    for(let i of data){
      console.log(i["ja"]);
    }
  })
  .catch((error) => {
    console.log("error");
  })
}

TEXT 形式のデータを取得する

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
</body>
</html>

sample.txt

Hello, World

script.js

window.onload = function(){
  fetch("./sample.txt")
  .then((response) => {
    return response.text();
  })
  .then((text) => {
    console.log(text);
  })
  .catch((error) => {
    console.log("error");
  })
}

HTML 形式のデータを取得

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
</body>
</html>

fetch.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>fetch.html</title>
</head>
<body>
  <h1 id="target">Hello, World(fetch.html)</h1>
</body>
</html>

script.js

window.onload = function(){
  fetch("./fetch.html")
  .then((response) => {
    return response.text();
  })
  .then((text) => {
    let parser = new DOMParser();
    let doc = parser.parseFromString(text, 'text/html');
    let target = doc.getElementById("target");
    console.log(target);
  })
  .catch((error) => {
    console.log("error");
  })
}

複数のデータを取得する

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
</body>
</html>

data.json

[
  { "ja" : "日曜日", "en" : "sunday"},
  { "ja" : "月曜日", "en" : "monday"},
  { "ja" : "火曜日", "en" : "tuesday"},
  { "ja" : "水曜日", "en" : "wednesday"},
  { "ja" : "木曜日", "en" : "thursday"},
  { "ja" : "金曜日", "en" : "friday"},
  { "ja" : "土曜日", "en" : "saturday"}
]

data2.json

[
  { "ja" : "1月", "en" : "january"},
  { "ja" : "2月", "en" : "february"},
  { "ja" : "3月", "en" : "march"},
  { "ja" : "4月", "en" : "april"},
  { "ja" : "5月", "en" : "may"},
  { "ja" : "6月", "en" : "june"},
  { "ja" : "7月", "en" : "july"},
  { "ja" : "8月", "en" : "august"},
  { "ja" : "9月", "en" : "september"},
  { "ja" : "10月", "en" : "october"},
  { "ja" : "11月", "en" : "november"},
  { "ja" : "12月", "en" : "december"}
]

script.js

window.onload = function(){
  async function fetchall() {
    const promise1 = fetch('data.json').then((res) => res.json())
    const promise2 = fetch('data2.json').then((res) => res.json())
  
    const [res1, res2] = await Promise.all([promise1, promise2])
    return [res1, res2]
  }
  
  fetchall()
  .then(([a, b]) => {
    for(let i of a){console.log(i)}
    for(let j of b){console.log(j)}
  })
}