【ReactNative開発】Fetch APIの戻り値がundefinedになる原因と対処法

こんにちは。今日もReact Nativeのトラブルシューティングが続きます。

問題

以下のように、fetch APIを使用する関数から戻り値を受け取るコードを書いて実行したところ、戻り値がundefinedになってしまいました。

呼び出す側の関数

const getUser = async() => {
    const params = {xxxx};
    user.Profile = await profileGetApi(params);
    console.log(user.Profile); #undifinedになる
};

呼び出される側の関数（fetch APIを利用している）

export const profileGetApi = async(params) => {

    const query = new URLSearchParams(params);
    const url = 'xxxx;
    await fetch (url, {
        method: 'POST',
        headers:{xxxx},
        body:JSON.stringify(xxxxx)
    })
    .then((response) => response.text())
    .then((data)=>{
        return JSON.parse(data);
    })
    .catch((error) => {
        return xxxxx;
    })
  }

原因と解決方法

呼び出す側でawaitで待ち構えているのに、おかしいなぁ・・・と思って調べ回ると、答えに辿り着きました。

https://stackoverflow.com/questions/39591514/es6-fetch-function-returns-undefined

https://teratail.com/questions/273402

https://jsprimer.net/use-case/ajaxapp/promise/#refactor-promise-chain

関数からはPromise型を返さないといけないようです。ということで、fetch自体をreturnする必要があるとのこと。（ちょっとまだ理解が十分でない）

とりあえず解決法としては以下のように変更すればOK。

呼び出される側の関数（fetch APIを利用している）

export const profileGetApi = async(params) => {

    const query = new URLSearchParams(params);
    const url = 'xxxx;
    await fetch (url, {
        method: 'POST',
        headers:{xxxx},
        body:JSON.stringify(xxxxx)
    })
    .then((response) => response.text())
    .then((data)=>{
        return JSON.parse(data);
    })
    .catch((error) => {
        return xxxxx;
    })
  }

Javascriptの非同期処理の沼にガッツリハマっている気がする。Async/Awaitを根本からしっかり理解せねば・・・。

おしまい。

[番外編] ReactNativeをもっと学ぶなら・・・

React Nativeをもっとちゃんと学びたい！という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・！

土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。