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

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

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

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

API

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

解決済

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

asukara123
asukara123

総合スコア10

JavaScript

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

API

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

1回答

0リアクション

0クリップ

214閲覧

投稿2022/09/20 11:12

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

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

json

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

結果

json

[ { "id": 1, "userId": 1, "amount": 1200, "memo": "食費", "bool": true, "date": "2022-09-11T00:00:00.000Z", "createdAt": "2022-09-19T17:31:42.000Z", "updatedAt": "2022-09-19T17:31:42.000Z", "UserId": 1 }, { "id": 2, "userId": 1, "amount": 1200, "memo": "食費", "bool": true, "date": "2022-09-11T00:00:00.000Z", "createdAt": "2022-09-19T17:31:50.000Z", "updatedAt": "2022-09-19T17:31:50.000Z", "UserId": 1 }, ]

バックエンドAPI

js

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

フロントエンド・コード

js

const { default: axios } = require("axios"); const data = { date: "2022-09-11", userId: 1, }; const getFetch = async () => { const all = await axios.get("http://localhost:4000/api/money/month", data); console.log(all.data); }; getFetch();

結果

shell

node:internal/process/promises:279 triggerUncaughtException(err, true /* fromPromise */); ^ [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".] { code: 'ERR_UNHANDLED_REJECTION' }

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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

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

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

JavaScript

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

API

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