前提
Reactとバックエンドをnode.jsでTodoアプリを作成しています。
バックエンドとの通信はaxiosを使用しています。
実現したいこと
一言だと非同期処理関数の戻り値のPromiseではなく、取りたい値をスマートに返すことはできない、もしくは取得できないかという質問です。
そもそもこのような書き方をするのか分からないのですが、APIとの通信をするためのファイルとしてjsファイルを作成し
この中でメソッドを定義しました。
通信自体はうまくいき全てのタスクを読み込み、名前を取り出せています。
const showTasks = async () => { try { const { data: tasks } = await axios.get(); // console.log(tasks); // タスクを出力 const allTasks = tasks.map((task) => { const { name } = task; return name; }); return allTasks; } catch(err) { console.log(err); } };
ここで上記のallTasksという変数にタスクがある分だけnameを取ってきています。これをjsxのファイルで受け取って
表示させたいと思い、showTasksをexportし、jsxのファイルにimport。
ここで中身を下のように確認してみたところ
const List = () => { const allTasks = showTasks(); console.log(allTasks); }
console.logの結果
Promise {<pending>} [[Prototype]] Promise [[PromiseState]] "fulfilled" [[PromiseResult]] Array(2)
非同期処理を行った関数の戻り値はPromiseになるとのことで取得したい結果が取れません。
色々試行錯誤してみて
const allTasks = showTasks().then((result) => console.log(result));
こうすると取得したいnameを表示できるのですが変数に収めることはできません。
スマートに非同期処理関数の戻り値を取得する方法はないでしょうか?
回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。