問題タブ [axios]

私はaxios promise ライブラリを使用していますが、私の質問はより一般的に当てはまると思います。現在、いくつかのデータをループして、反復ごとに 1 つの REST 呼び出しを行っています。
各呼び出しが完了するたびに、戻り値をオブジェクトに追加する必要があります。大まかに言えば、次のようになります。

もちろん、axios はまだ手を差し伸べているため、まだデータが含まれていない場合にconsole.log発生しています。mainObjectこの状況に対処するための良い方法は何ですか?

Axiosにはall姉妹メソッドと一緒にメソッドspreadがありますが、前もって何回の呼び出しを行うかを知っていれば、それらは役に立ちますが、私の場合、ループの反復回数はわかりません.

API ラッパーを作成し、es6 クラスを使用して axios から拡張することに興味があります。これはどのように可能ですか？Axiosには、新しいaxiosオブジェクトを生成できるメソッド .create() があります

私はこれにアクセスできることを知っていますlet instance = axios.create()。

何かご意見は？

試行 1

試行 2

新しい react-redux プロジェクトに jest 単体テストを追加しようとしています。コンテナの 1 つをテストするために、次のような最初のテスト ファイルを作成しました。

event-form.js ファイルで、アクションから関数をインポートしています。

そして actions.index.js ファイルで axios モジュールをインポートしています:

この時点でテストを実行しようとすると、axios コードからエラーが発生します。

冗談ですべてが嘲笑されていると思いました。actions/index.js がインポートと共に初期化されているように見えるのはどうしてですか?

プロジェクトで axios を使用してサーバー接続を確立するための次のコードがあります。

テスト フレームワークとして Jest を使用しており、axios のモックに成功しましたが、この then-Function に問題があります。

ただし、テストを実行すると、次のエラー メッセージが表示されます。

TypeError: _axios2.default.get(...).then は関数ではありません

そのとき存在し、関数であることをどうにかして伝える方法を見つけなければなりません。これは、module.exports で行う必要があります。これを行う方法についてのアイデアはありますか？

ノードアプリ（GraphQLサーバー）から投稿を受け取るガーディアンとUberauthを使用して保護されたフェニックスアプリがあります。これは、認証ヘッダーで JWT を渡すことによって保護されます。

認証は正常に機能しているように見えますが、私のフェニックスコントローラーでは、次のように爆発しています

** (FunctionClauseError) no function clause matching in Poison.Encoder.BitString.chunk_size/3 (poison) lib/poison/encoder.ex:127: Poison.Encoder.BitString.chunk_size(<<5, 230, 171, 122, 183, 178, 38, 22, 198, 114, 35, 162, 36, 133, 51, 83, 19, 34, 34, 194, 39, 71, 151, 2, 35, 162, 36, 165, 117, 66, 39, 13::size(4)>>, nil, 0)

認証を追加する前は、これは正しく機能していました。見知らぬ人は、次のようなcurlリクエストです：

curl -i -H "authorization: eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJVc2VyOjIiLCJleHAiOjE0OTU2MjU3MjEsImlhdCI6MTQ2NDA4OTcyMSwiaXNzIjoiU2hvcHNoYXJlIiwianRpIjoiMDE2OTJjMzctM2QxYi00Yzc5LThiMjYtYzExN2QyNTM1MGI5IiwicGVtIjp7fSwic3ViIjoiVXNlcjoyIiwidHlwIjoidG9rZW4ifQ.GfqVSw3hPsy-zOp1yx6IXAGhM4uX0CsMbU3DHqtFCn7SQYPi24DJ2F4yC48cfiQi82-hvpUoxdnFm_x5osBb3w" -H "Accept: application/json" -H "Content-Type: application/json" -X POST -d '{"comment": {"content": "test"}}' http://localhost:8081/api/v1/current_user/products/1/comments

期待どおり、100% 正しく動作します!

私の送信 Axios リクエストは次のようになります。

frontend_1 | { headers: frontend_1 | { authorization: 'Bearer eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJVc2VyOjIiLCJleHAiOjE0OTU3OTg4OTUsImlhdCI6MTQ2NDI2Mjg5NSwiaXNzIjoiU2hvcHNoYXJlIiwianRpIjoiYWE2YTE2M2YtYzM5ZC00ODVjLTgwMjEtMDMxMjUwNzc4YjcxIiwicGVtIjp7fSwic3ViIjoiVXNlcjoyIiwidHlwIjoidG9rZW4ifQ.4vosfEx69s_90UlCkgWNbxoNNAKuckYvqNRsqfznvzddI-k63LaXz7MWum82aSiHDkiw7L3tk6df8tZVh2Zz_A', frontend_1 | Accept: 'application/json', frontend_1 | 'Content-Type': 'application/json' }, frontend_1 | timeout: 0, frontend_1 | transformRequest: [ [Function: transformResponseJSON] ], frontend_1 | transformResponse: [ [Function: transformResponseJSON] ], frontend_1 | method: 'post', frontend_1 | url: 'http://api:8080/api/v1/current_user/products/2/comments', frontend_1 | data: { comment: { content: 'test' } }, frontend_1 | withCredentials: undefined }

次に何をしようか迷っています。ペイロードで何を送信しても、Elixir の文字リストは同じままのようです。そのcharリストにあるものをデコードできないようですが、何が起こっているのかの手がかりであると思われます。

データ本体を提供する axios.post メソッドを実行しているときに、サーバーで未定義としてキャプチャされる理由がわかりません。

コードのスニペットを含む次のファイルがあります。

app.js:

サーバー.js:

axios を使用して POST データを適切に処理するにはどうすればよいですか? 何か不足していますか？

成功すると正常に返されますが、ユーザー名/パスワードが req のどこにも見つからないようです

ユーティリティ関数で axios をラップして、redux の状態に保存されているベース URL と認証トークンを追加できるようにしたい

これを行う最も簡単な方法は何ですか?

状態と小道具にアクセスできるように、これを redux に接続するにはどうすればよいですか?

バックグラウンド

安らかなバックエンド、React + Redux フロントエンドがあり、CSRF および XSS 攻撃から保護しようとしています。

フロントエンドは、API から CSRF トークンを要求します。API 応答は、CSRF トークンを HttpOnly Cookie と応答本文に設定します。redux レデューサーは、トークンを (応答本文から) redux ストアに保存します。

メイン コンテナの でトークンを要求するとcomponentDidMount()、すべてが機能しますが、懸念されるのは、これがワン ショットであるということです。代わりに、API へのリクエストはカスタム ミドルウェアを経由するため、ミドルウェアがローカルに存在しない場合は CSRF トークンをリクエストすることをお勧めします。

問題

フローは次のとおりです (Chrome 50 および Firefox 47 でテスト済み)。

1. CSRF トークンが要求されました。HttpOnly cookie および redux ストアに格納されたトークン
2. X-CSRF-Tokenヘッダー セットで要求された元の API 呼び出し。クッキーが送信されない
3. Cookie がないため、API から 403 を受け取ります。API は新しい HttpOnly cookieで応答します。Javascript はこの Cookie を認識できないため、redux ストアは更新されません。
4. ステップ 2 の X-CSRF-Token ヘッダーとステップ 3 の Cookie を使用して要求された追加の API 呼び出し。
5. Cookie と X-CSRF-Token の不一致により 403 を受信する

でステップ 2 の前に遅延を追加するとwindow.setTimeout、Cookie はまだ送信されないので、ブラウザーが Cookie を保存するのに十分な時間がないという競合状態ではないと思いますか?

アクションクリエーター

ミドルウェア

Redux を試してみたところ、ajax 呼び出しを行うにはミドルウェアが不可欠であることがわかりました。redux-thunk と axios パッケージを別々にインストールし、結果を状態としてフックして、ajax の結果をコンポーネントにレンダリングしようとしました。しかし、ブラウザー コンソールにエラーが表示され、リデューサーがペイロードを取得できませんでした。

エラー：

キャッチされていないエラー: アクションはプレーン オブジェクトである必要があります。非同期アクションにはカスタム ミドルウェアを使用します。

これは私のコードの一部であり、ミドルウェアがどのように接続されているかです:

私の行動:

レデューサー:

状態のroutesサイズは 0 ですが、アクション ペイロードの配列は 3 です。

本当にありがとうございました。