axios不要!fetch()でAjax通信する方法

こんにちは❗フリーランス・コンサルタント&エンジニアの 九保すこひ です。

さてさて、これは開発者の方なら「あるある」な話だと思うのですが、たまに全く別の調べものをしていて、

「えっ、こんなやり方があるの❗❓」

ってなることもあるんじゃないでしょうか。

というのも、開発の世界は新しいものが常に登場しますし、スピードも早いのでチェックが漏れてしまっているテクノロジーが出てくるのも当然と言えば当然なことかもしれません。

そして、今回ご紹介したいのが、まさに1年ほど前に「これは知らなかった❗」となったfetch APIです。

fetch APIというのは、簡単に言うと「Ajax通信」するために用意されたものでIEを除くほぼすべてのブラウザで有効になっています。

私の場合、Ajax通信はaxiosばかり使っていたのですが、fetch APIは純粋なJavaScriptの機能なので、<script>タグでコードを読み込む必要がないのがメリットです。

そこで!

今回はfetch APIの基本的な使い方をご紹介します。
ぜひ楽しみながらみていきましょう❗

$.ajax()って書いてた頃が懐かしい・・・😂」

基本的な使い方(GET)

では、fetchの基本的な使い方を紹介します。
次の例を見てみましょう❗

fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => {

        return response.json(); // 👈 Promiseを返す

    })
    .then(data => { // 👈 JSONデータ

        console.log(data);

    })
    .catch(error => { // 👈 エラーの場合

        console.log(error);

    });

axiosに慣れている人だと、「あれっ❓❓」と思うかもしれませんが、thenが2つあるのは、JSONデータを取得するための正しいやり方です。

実はこの場合、1つ目のthen()ではJSONデータを取得することはできません。なぜならresponse.json()Promiseだからです。

そのため、一旦returnで値を返しておき、2つ目のthen()でやっとJSONデータが取得できる流れになります。

また、Ajax通信やthen()でエラーが発生したら、catch()が実行されることになります。

※なお、asyncawaitを使うと次のようにすることもできます。

(async () => {

    const response = await fetch('https://jsonplaceholder.typicode.com/posts');

    if(response.ok) {

        const data = await response.json(); // 👈 JSONデータ

    }

})();

パラメーターを送信する(POST, PUT, PATCH, DELETE)

例えばAjaxでPOST送信したい場合です。
まず例を見てみましょう。

// 👇 送信データ
const data = {
    keyword: 'キーワード',
    orderBy: ['created_at', 'desc']
};

fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST', // 👈 メソッド ・・・ ①
        headers: {
            'Content-Type': 'application/json', // 👈 データ形式 ・・・ ②
        },
        body: JSON.stringify(data) // 👈 送信データ ・・・ ③
    })
    .then(response => response.json())
    .then(data => {

        console.log(data);

    })
    .catch(error => {

        console.log(error);

    });

各ブロックの説明は次のとおりです。

①メソッド

この部分は、次のような送信タイプを指定することになります。

  • POST
  • PUT
  • PATCH(部分的なPUT)
  • DELETE

②データ形式、③送信データ

まず、決まりごととして、②データ形式と③送信データは一致させる必要があります。

例えば、今回の例はJSON形式でのデータ送信なので、application/jsonを使っていますが、ファイル送信の場合は、application/x-www-form-urlencodedを使います。

※ファイル送信する方法は次の項目をご覧ください。

ファイルを送信する

次にファイルを送信する場合を見ていきましょう。
例えば、次のようなフォームです。

<form id="form">
    <input type="text" name="email" value="test@example.com"><br>
    <input type="text" name="password" value="secret"><br>
    <!-- 👇 ファイル入力 -->
    <input type="file" name="file">
</form>

この場合、送信データはFormDataを使い、さらにデータ形式はapplication/x-www-form-urlencodedを使います。

const formData = new FormData(document.getElementById('form'));

fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded', // 👈 データ形式
        },
        body: formData // 👈 FormData
    .then(response => response.json())
    .then(data => {

        console.log(data);

    })
    .catch(error => {

        console.log(error);

    });

おわりに

ということで、今回は純粋なJavaScriptの機能、fetch()でAjax送信する方法を紹介しました。

冒頭でも書いたとおり、特にライブラリを読み込まなくても使えるのは大きなメリットなんじゃないでしょうか。

ただ、コードを見てもらったら分かるとおり、axiosと比べるとちょっと「クセが強い😂」ので、最初はとっつきにくいかもしれません。

というのもaxiosの場合、次のようにthen()catch()がひとつずつですし、送信メソッドもひと目で分かるので、より直感的に使えるんじゃないでしょうか。(・・・というか、なぜfetchもこれと同じにしなかったのか不思議なところです😅)

axios.post('https://jsonplaceholder.typicode.com/postsake')
    .then(response => {

        // 成功した時

    })
    .catch(error => {

        // 失敗した時

    });

とはいえ、新しいJavaScriptコードのサンプルではfetchが使われているのも増えてきているので、今後のために覚えておいて損はしないと思いますよ。

ぜひ一度使ってみてくださいね。

ではでは〜❗

「私の開発では、まだまだ
axiosにお願いすることになりそうです😊👍」

開発のご依頼お待ちしております 😊✨
開発のご依頼はこちらから: お問い合わせ
どうぞよろしくお願いいたします!
このエントリーをはてなブックマークに追加       follow us in feedly  

開発効率を上げるための機材・まとめ