BETA

速習ECMAScript2018を勉強する Fetch編

投稿日:2018-11-09
最終更新:2018-11-09

Fetch

  • httpリクエストの処理ができる命令です。
  • XMLHttpRequestというものも標準でつかえますが、面倒なのでみんな使いたくないみたいです.
  • ブラウザー環境では、標準コマンドで使えたように思いますが、node環境では追加する必要がありますので追加します。
yarn add node-fetch
  • fetch(url, options)
  • options

    • methods
    • headers
    • body
  • 第一引数がUrlで、第二引数がオプションと言う構成です。

  • とりあえず、適当なURLの情報を取得します。
    • optionsを省略するとデフォルト状態で取得されます。method: 'GET' です。
const fetch = require('node-fetch');
const url1 = ''
const url2 = 'http://httpbin.org';

fetch(url2)
    .then(res => console.log(res))
  • 実行すると、オブジェクト形式のJSONでデータがとれていることがわかります。

  • データをテキスト形式で取得してみます。

const fetch = require('node-fetch');
const url1 = ''
const url2 = 'http://httpbin.org';

fetch(url2)
    // .then(res => console.log(res))
    .then(res => res.text())
    .then(body => console.log(body))
  • html形式で取得できています。

  • then の連結は、asyncに書き換え可能でしたので、asyncに書き換えてみます.

const fetch = require('node-fetch');
const url1 = ''
const url2 = 'http://httpbin.org';

async function asyncFunc() {
    const res = await fetch(url2);
    const text = await res.text();
    console.log(text)
}
  • then連結、async どちらも同じ感じで取得できていますが、取得失敗するとエラーでおちちゃいますので、try ~ catchを追加してみます。
const fetch = require('node-fetch');
const url1 = ''
const url2 = 'http://httpbin.org';

async function asyncFunc() {
    try {
        const res = await fetch(url2);
        const text = await res.text();
        console.log(text)
    } catch(e) {
        console.log('エラー: ', e.message)
    }
}

asyncFunc()
  • とりあえず、処理ができているようです。

  • Post もしてみます

const fetch = require('node-fetch');
const url1 = ''
const url2 = 'http://httpbin.org';

const data = new URLSearchParams();
data.set('name', 'Takuma')
console.log('data: ', data);

const options = {
    method: 'POST',
    body: data,
    headers: {
        'content-type': 'application/json'
    }
}

async function asyncFuncPost() {
    try {
        const res = await fetch(url2+'/post', options); //  書き込み
        const json = await res.json(); // 書き込んだレスポンス
        console.log('asyncFuncPost: ',json.data)
    } catch(e) {
        console.log('エラー: ', e.message)
    }
}
  • Post 時は、第二引数で method指定をします。
  • 投げるデータは、JSONにのっとった形式にする必要があるみたいです。
  • インスタンスを作って、その中に収めてしまえばいいので、そうします。
  • 書き込んだ結果のレスポンスが帰ってきているので、正常に書き込まれたのがわかります。

  • 実際fetchをつかっていると、サーバー側制限事項があって取得できないこともあるので、いろいろ試してみるしかありませんが出来ることが増えると嬉しくなります。

  • あと学習メモは、日々取り続けたほうがいいです。
  • 私も、いろいろメモのとり方を試行錯誤して、webを参考にして、今のメモのとり方が気に行っています。
  • またメモ記事も投稿したいですが、とりあえずこの本をよまないと行けないので。m(_ _)m
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@atoris1192の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!