async, awaitのコードを関数化すると、json()使用しているのに返り値がPromiseになる

Question

環境

Amazon linux AMI
React.js 16.8.6
Typescript 3.5.2

実現したい事

▼現状(APIからjsonで情報を受け取る)

interface State {
    products: any[],
}

class Hoge extends React.Component<{}, State> {
    constructor(props: any) {
        super(props);
        this.state = { products: [] };
    }

    async componentDidMount() {
    	//=====ここのAPIの情報とってくる部分を関数化したい=====
        const response = await fetch('/api/hoge', {
        	method: POST,
    	});
    	const products = await response.json();
        this.setState({ products });
    }

    render() {
        return (
            <div className="hoge">
                //省略
            </div>
        );
    }
}

export default Hoge;

▼試してみたコード

import apiConnect from '../common/ApiConnect';//**追加

interface State {
    products: any[],
}

class Hoge extends React.Component<{}, State> {
    constructor(props: any) {
        super(props);
        this.state = { products: [] };
    }

    async componentDidMount() {
    	const products = apiConnect('/api/hoge', 'POST')//**変更
        this.setState({ products });
    }

    render() {
        return (
            <div className="hoge">
                //省略
            </div>
        );
    }
}

export default Hoge;

▼apiConnect.tsx

const apiConnect = async function(url: string, method: string) {
    const response = await fetch(url, {
        method: method,
    });
    const data = await response.json();
    return data;
}

export default apiConnect;

困っていること、質問

①apiConnect関数ではjson()を使用しているのに、Promiseがreturnされるのはなぜか？
②①のせいでsetStateで値を更新できないが、この場合どう対処したら良いのか？

よろしくお願いいたします。

Comments

[yambejp]

表題「async」のつづりが違います

Answer 1

asyncはpromiseを返す仕様です
戻り値はthenのコールバックの引数で確認してください

const x=async ()=>await [1,2,3];
x().then(console.log);

Comments

[kazoogon]

ご回答ありがとうございます。
こちら参考に自分でapiConnect関数を修正したらいけました、ありがとうございます。

Answer 2

apiConnect関数呼び出し部分にawaitを追加したらいけました

Comments

[KuwabataK]

純粋に興味なのですが、上記の修正って意味あるのでしょうか・・・？
もとのapiConnect()関数のまま、apiConnect()を呼び出すときにawaitをつけるだけで動きませんか？

[kazoogon]

そうするとthis.setState({ products });の部分でpruductがPromiseだからsetStateできないよ。というエラーが返ってきます。
(もしエラー文が必要な場合はご連絡くださいませ)

[KuwabataK]

確認したいのですが、apiConnect()関数の呼び出し部分は

const products = apiConnect('/api/hoge', 'POST')

と書いていますか？それとも

const products = await apiConnect('/api/hoge', 'POST')

と書いていますか？

下の書き方で動くのであればわかるのですが、上の書き方のままで動くのであれば、私のPromiseの理解が間違っている気がして気になりました。
そこだけ確認していただければ、後は自分で調べたいと思います。

付き合わせてしまって申し訳ないです

[kazoogon]

const products = await apiConnect('/api/hoge', 'POST')
とawaitを追記する + apiConnectの関数内を修正する

でいけました。

[KuwabataK]

あ、そうなのですね。良かったです。
じゃあ試しにapiConnectの中身を変えずに awaitだけ追記したコードを試してみてください

多分動きますよ

apiConnectの中身は最初のまま(以下のまま)で問題ないです

const apiConnect = async function(url: string, method: string) {
const response = await fetch(url, {
method: method,
});
const data = await response.json();
return data;
}

[kazoogon]

あ、確かに動きました。
関数は元々json返していたけど、setStateをするのがまだAPIから情報をとってきていない時点だった。
ということですね(=だからawait付けて、productsにAPIからの値が入ったあとにsetStateする)

[kazoogon]

また全く違う質問になるんですが、これ関数名apiConnectよりapiFetchの方がいいのかなぁ　と思ってきました。

もしお時間余裕ありましたら、ご意見お伺いしたいです

[kazoogon]

ベストアンサーにkuwataKさん指定したいですが、もう手遅れで申し訳ないです汗

[KuwabataK]

いえいえ、大丈夫ですよ。
私もPromiseやasync/awaitの仕様を再確認できたので良かったです。

名前の件ですが、私的にはapiConnectのまんまでもいいかな。と思います。

理由は、fetchという名前だとデータをダウンロードするイメージをもつ人がいる(たぶんGitの影響)ということですね。今回のapiConnect()は引数にmethodを指定できるようになっていてPOSTリクエストとかも送れるので、そこで混乱する人も（もしかしたら）いるかもなあ
と思いました。

とはいえ、標準APIでPOSTもPUTも呼べるfetchAPIがあるので、そちらをきちんと理解して連想してくれるメンバーと仕事できるならfetchのほうがいいですね。

まあ殆ど好みの差なのでどちらでも良いと思います。

[kazoogon]

いろいろご丁寧なご回答ありがとうございました。
他の方の意見が聞けてよかったです :)

[KuwabataK]

と、書いた後に気づきましたが、apiConnectはデータを持ってくる用の関数として考えていて、送信は考慮してない感じですかね？

それならapiFetchのほうが、データをもらってくる用だよ感がでて良いと思います

Answer 3

他の回答でも言われているようにasync関数はPromiseを返します。
そしてPromiseを返すということは、他のasync関数内で使う場合にはawaitを使うことができるということです。

なので、以下のようなコードに変更すれば動くと思います

async componentDidMount() {
    const products = await apiConnect('/api/hoge', 'POST') // <= awaitをつける
    this.setState({ products });
}

Comments

[kazoogon]

ご回答ありがとうございます、こちらの修正と関数の中身を変更したらいけました。
ありがとうございました。