Fetch API

非同期リクエストの最も代表的なケースを選択すると、ネットワークリクエストを選択できます.様々なネットワークリクエストの中で、最も一般的なのはURLを使ってリクエストすることです.可能にするAPIがFetch APIである.
あるポータルサイト上の毎時毎刻変化している情報と固定された情報が分かれているとすれば、毎時毎刻変化している情報、すなわち最新のニュースや天気情報は、データを動的に受信する必要がある情報である.このとき、これらの情報を更新するだけでJavaScriptを使用することができ、Fetch APIはこれらの情報をリモートURLにロードする.
Fetch APIは、特定のURLから情報を受信する役割を果たし、このプロセスが非同期である場合、時間のかかる操作が要求される場合、ブロック(同期処理)を発生させるべきではないため、特定のDOMに情報を表示する前に、通常、ロードウィンドウを置き換える.
Fetch API使用法
Fetch APIはPromise形式で実現される.

let url = 'http://example.com/최신뉴스';
fetch(url)
  .then(response => response.json()) // 자체적으로 json() 메소드가 있어, 응답을 JSON 형태로 변환시켜서 다음 Promise로 전달합니다
  .then(json => console.log(json)) // 콘솔에 json을 출력합니다
  .catch(error => console.log(error)); // 에러가 발생한 경우, 에러를 띄웁니다

以下はsprintで作成したコードです.

var newsURL = 'http://localhost:5000/data/latestNews';
var weatherURL = 'http://localhost:5000/data/weather';

function getNewsAndWeather() {
  return fetch(newsURL)
    .then(response => response.json())
    .then((json1) => {
      return fetch(weatherURL)
        .then(response => response.json())
        .then((json2) => {
          return {
            news: json1.data,
            weather: json2
          }
        })
    })
}

以上のように、fetch APIを使用すると、特定のURLから次のニュースおよび天気情報が受信されます.

const obj = {
  news: [{ row_id: 2, title: "2021년 경제 성장률 전망 밝아", source: "A신문", timestamp: "2020/12/30" },
  { row_id: 3, title: "코로나19 증가추세 대폭 하락해", source: "BBC", timestamp: "2020/12/29" },
  { row_id: 4, title: "코드스테이츠 취업연계 파트너사 xxx건 돌파", source: "스타트업 뉴스", timestamp: "2020/12/31" }],

  weather: { status: "sunny", tempature: "28", finedust: "good" }
};

Promise.複数のPromiseはallで処理できます.

function getNewsAndWeatherAll() {
  let news = fetch(newsURL)
    .then(response => response.json());
  let weather = fetch(weatherURL)
    .then(response => response.json());
  return Promise.all([news, weather])
    .then(values => {
      return {
        news: values[0].data,
        weather: values[1]
      };
    })
}

Async/Awaitキーワードを使用すると、コードをより簡潔に表現できます.

async function getNewsAndWeatherAsync() {
  let json1 = await fetch(newsURL)
    .then(response => response.json());
  let json2 = await fetch(weatherURL)
    .then(response => response.json());

  return {
    news: json1.data,
    weather: json2
  }
}