【ReactNative開発】fetch APIの戻り値 (response) がundifinedになる

こんにちは。今日も今日とてReactNativeでの開発に苦しんでいます。ReactNative、というかJavaScriptの根本的なところで苦しんでいるのですが・・・笑

今日もまたひとつ躓きがあったので、記録を残しておきます。

問題

JavaScriptのfetchを使ってAPIの呼び出しを行なった際の戻り値を確認したかったのですが、console.logで表示させてもundefinedになってしまいました。

    const url = '呼び出すURL';
    await fetch (url, {
        method: 'POST',
        headers:{
              XXXXX....
        },
        body:formData
    })
    .then((response) => {
         response.json()
    })
    .then((data)=>{
        console.log(data); //Undefinedになってしまう!
        console.log("## API SUCCESSUFLLY CALLED")
    })
    .catch((error) => {
        console.log("## API CALL FAILED")
        alert(error)
    })

原因と解決方法

こちらのサイトが参考になりました。

react native – fetch response.json() gives responseData = undefined – Stack Overflow

if you do a callback with curly braces you need to return response.json(). The simplified form response => response.json() has an implicit return statement in it.

なるほど。thenの中を{}を使って書いている場合には、response.json()の結果を明示的にreturnしないとダメみたいです。ちなみに{}を使わずに書くことで、暗黙的なreturnが行われて、簡易にやりたいことが実現できるようです。

今回は、上のコードのresponse.json()の前にreturnを追加して無事に戻り値が表示されるようになりました!

    const url = '呼び出すURL';
    await fetch (url, {
        method: 'POST',
        headers:{
              XXXXX....
        },
        body:formData
    })
    .then((response) => {
         return response.text() //returnを追加!
    })
    .then((data)=>{
        console.log(data); //結果が返ってくるようになった!
        console.log("## API SUCCESSUFLLY CALLED")
    })
    .catch((error) => {
        console.log("## API CALL FAILED")
        alert(error)
    })

おしまい

この記事を気に入っていただけたらシェアをお願いします!

ABOUT US

Yuu113
初めまして。Yuu113と申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。