fetch、weather APIの使用


  • JavaScriptでオブジェクトと配列を処理
  • UIをワイヤフレームとして描画し、HTML&CSSとして設計する
  • 特定都市・現時点の天候データについて
  • DOMを使用して特定の要素上で所定の気象データ値を動的にレンダリング
  • OPEN APIを使用して気象データを取得


    リソースを提供するエージェントをサーバと呼びます.
    では、リソースを要求する人またはプログラムをクライアント(client)と呼ぶ.
    Clientは、Webブラウザであってもよいし、開発者が作成したプログラムであってもよい.
    API(Application Programming Interface)とは、リソースをよりよく利用するためにサーバをクライアントに提供することです.
    サーバがリソースを渡すには、クライアントが利用できるAPIを確立する必要があります.通常、インターネット上のデータが要求されると、HTTPプロトコルが使用され、アドレス(URL、URI)でアクセスされる.

    API Key


    APIを使用するにはAPIキーが必要です.

    fetchリクエストサーバの使用


    サーバとクライアント

  • リクエストの主体:クライアント
  • 応答要求:サーバ

  • リクエストサーバ

  • 通常、HTTP(URL)要求をサーバに送信し、応答を処理する.
  • 応答は、JSON、HTMLなど様々な形で受信できる.

  • HTTPリクエストを使用してAPIを取得する

    fetch('http://serverAddress/weather?q=Jeju')
    .then(function(response) {
      // 응답의 형식에 따라 response.text( )가 될 수 있음
      return response.json( );
    })
    .then(function(json) {
      console.log(json); // { tempature:24 }
    });

    サーバへの書き込み


    HTTP要求がGET要求ではなくPOST要求である場合、コンテンツ(負荷)とともに伝達される.
    たとえば、id、passwordを使用してログインしたときに、新しい投稿を登録しようとした場合.
    let newContent = {
      'userId': 'dotori', 
      'title': '날씨 apit 제대로 한번 사용해볼래요!', 
      'body': '날씨 API를 사용하기 위해서는 우선 가입이 필요하고, 해당 서비스는 유료이기 때문에 사용자마다 고유한 api Key가 존재합니다...........'
    };
    
    fetch('http://serverAddress/post1', {
      method: 'POST',
      body: JSON.stringify(newContent)
    }).then(function(response) {
      return response.json( );
    }).then(function(json) {
      console.log(json); // { id: content1 }
    });