Vue 3 の再利用可能なエラー処理と、コンポジション API を使用した「useForm」の再利用可能な handleSubmit 関数

Question

最近の Web アプリケーションには、同じ送信構造を持つフォームが多数あります:

1. isSubmitting変数に基づいてフォームと送信ボタンを無効にします
入力フィールドを検証します (
2. Yup を使用します)
検証が失敗した場合:
3. isSubmitting を false 設定に戻し、入力フィールドに validationErrors を表示します。
検証が成功した場合: フォーム データを含む POST リクエストを API に送信します。
4. API が閉じられている場合、またはエラーが返された場合は、一般エラーを表示します
vue 3 のコンポジション API を使用していくつかの操作を実行してみました。

Login.vue

リーリー

useForm.js

リーリー これはある程度機能しますが、2 つの点が欠けています。

useForm

では、isSubmitting を false に戻す前に、コールバックが完了する (成功または失敗) まで待機したいと考えています。コミットメントはこれを行う良い方法でしょうか?もっと良い方法はありますか？次に、Login.vue のエラーを処理する再利用可能な方法が必要です。この問題に対処する方法について何か提案はありますか?

Answer 1

最初の質問について - try..catch ステートメントには finally という名前の 3 番目のステートメントがあり、これは常に try ステートメント内にあります。ブロックが完成しました。

• https://developer .mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch

2 番目の質問に答えるには - Promise は、リクエストを送信している API がエラー応答を返す状況など、非同期ロジックを処理するための良い方法であり、その場合のユーザー エクスペリエンスを処理する方法を決定できます。 。

Login.vue のエラーを再利用可能な方法で処理するという意味がよくわかりませんが、単に formErrors## という空の配列 prop を渡すこともできるかもしれません # of useForm を実行し、useForm.js で update:modelValue イベントを発行して双方向バインディングを取得します。