質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.54%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

632閲覧

自作APIをAxios.getで叩きたい

asukara123

総合スコア10

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2022/09/20 11:12

APIを作成しました。
Postmanで目的のjsonデータを取得することができます。
フロントエンドでAxiosを用いると取得できません。
しばらく調べましたが、原因がわからなかったの教えていただきたいです。
よろしくお願いします。

Postman
GET http://localhost:4000/api/money/month

json

1{ 2 "date": "2022-09-11", 3 "userId": 1 4}

結果

json

1[ 2 { 3 "id": 1, 4 "userId": 1, 5 "amount": 1200, 6 "memo": "食費", 7 "bool": true, 8 "date": "2022-09-11T00:00:00.000Z", 9 "createdAt": "2022-09-19T17:31:42.000Z", 10 "updatedAt": "2022-09-19T17:31:42.000Z", 11 "UserId": 1 12 }, 13 { 14 "id": 2, 15 "userId": 1, 16 "amount": 1200, 17 "memo": "食費", 18 "bool": true, 19 "date": "2022-09-11T00:00:00.000Z", 20 "createdAt": "2022-09-19T17:31:50.000Z", 21 "updatedAt": "2022-09-19T17:31:50.000Z", 22 "UserId": 1 23 }, 24]

バックエンドAPI

js

1// 月単位でレコードを取得 2router.get("/month", async (req, res) => { 3 try { 4 const data = await Money.findAll({ 5 where: { 6 date: { [Op.substring]: req.body.date.slice(0, 7) }, 7 userId: req.body.userId, 8 }, 9 }); 10 if (!data) { 11 return res.status(200).json({ msg: "該当データが存在しませんでした" }); 12 } else { 13 return res.status(200).json(data); 14 } 15 } catch (err) { 16 return res.status(500).json(err); 17 } 18});

フロントエンド・コード

js

1const { default: axios } = require("axios"); 2 3const data = { 4 date: "2022-09-11", 5 userId: 1, 6}; 7 8const getFetch = async () => { 9 const all = await axios.get("http://localhost:4000/api/money/month", data); 10 console.log(all.data); 11}; 12 13getFetch();

結果

shell

1node:internal/process/promises:279 2 triggerUncaughtException(err, true /* fromPromise */); 3 ^ 4 5[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "AxiosError: Request failed with status code 500".] { 6 code: 'ERR_UNHANDLED_REJECTION' 7}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

asukara123

2022/09/20 11:32

追記ありがとうございます。 expressでAPIを作成しているのですが、動いているかは別として設定はしています。 先ほどすごく単純なAPIを再度作成して実験していたのですが、第2引数のbody要素を入れていたのが原因かな?と思っています。 axios.getの第2引数に入れられるのはparamsだけだったりするのかなぁと予想しています。
hoshi-takanori

2022/09/20 11:49

あ、get には body はない (無理やり指定すれば動く場合もあるけど、保証されてない) はずですね。
asukara123

2022/09/21 21:13

なるほどです!! 解決しましたありがとうございました!!
guest

回答1

0

自己解決

解決しました。

Axiosのgetの第2引数はbodyではなくparamsでした

投稿2022/09/21 21:13

asukara123

総合スコア10

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.54%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。