[ 06.23 ] fetch/json

2115 ワード
テキストリンク

Achievement Goals


全体の取り方の形態、使い方を理解する.
この間学んだ約束asyncで書きます.
コールバック、承諾、async OK.今から応用しましょうか?
でもfetchに初めて触れた後、うん?しました.
json()メソッドが突然どこから出てきたのか、なぜ使うのか.

パラメータ
なし.
超清潔.
好きです.
つまり,この方法はbody部分での変換をJSONとし,次のpromisに渡す.

整理する


fetchのみなので、直接データをインポートして使用することはできません.
fetchを使用するには2つのステップが必要です.
1.まず、正しいURLでリクエストを送信します.
2.後続の応答をjson()する.
(axiosはjson()プロセスを自動的に完了することに相当する).
fetch(url)
  .then((response) => response.json()) 
  .then((data) => console.log(data)) 
  .catch((error) => console.log(error));
URLを受け取って非同期で実行するように要求した場合は、
fetch/jsonは、以下に示すように使用できます.

let newsURL = 'http://localhost:3000/data/latestNews';
let weatherURL = 'http://localhost:3000/data/weather';

function getNewsAndWeather() {
  let obj = {};
  return fetch(newsURL)
  .then(response => response.json())
  .then((value) => {
    obj.news = value.data;
    return fetch(weatherURL)
    .then(response => response.json())
    .then((value) => {
      obj.weather = value;
      return obj;
    })
  })
  .catch(err=> console.log(err))
}
Promise.allを利用すると?
function getNewsAndWeatherAll() {
  // TODO: Promise.all을 이용해 작성합니다
  let obj = {};
  const newsData = fetch(newsURL).then(data => data.json())
  const weatherData = fetch(weatherURL).then(data => data.json())
  
  return Promise.all([newsData,weatherData])
  .then((data) => {
    obj.news = data[0].data;
    obj.weather = data[1];
    return obj
  })
}
もっと簡単なasyncを使えば?
async function getNewsAndWeatherAsync() {
  // TODO: async/await 키워드를 이용해 작성합니다
  
  const newsData = await fetch(newsURL).then(data => data.json())
  const weatherData = await fetch(weatherURL).then(data => data.json())
  return {news:newsData.data,weather:weatherData}

}
比較するとそうです.
勉強した時に感じたこともあります
コンソール...ぜひ撮ってみてください
filter
[C++]BOJ 10814号:年齢順