4.3 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d7fb2367417b2b2512bf7 | POST リクエストを解析するためにボディパーサーを使用する | 2 | 301520 | use-body-parser-to-parse-post-requests |
--description--
GET のほかにもう一つ一般的な HTTP 動詞があります。それは、POST です。 POST は、HTML フォームを使用してクライアントデータを送信するために使用するデフォルトのメソッドです。 REST の慣例では、POST は、データベースに新しいアイテム (新規ユーザー、または新しいブログ投稿) を作成するためのデータを送信する場合に使用します。 このプロジェクトにはデータベースはありませんが、ひとまず POST リクエストの処理方法について説明します。
このようなリクエストでは、データは URL には表示されず、リクエストボディに隠されています。 ボディは HTTP リクエストの一部であり、ペイロードとも呼ばれます。 URL にデータが表示されていなくても、データが非公開であるとは限りません。 その理由を理解するため、HTTP POST リクエストの処理前の内容を見てみましょう。
POST /path/subpath HTTP/1.0
From: john@example.com
User-Agent: someBrowser/1.0
Content-Type: application/x-www-form-urlencoded
Content-Length: 20
name=John+Doe&age=25
ご覧のように、ボディはクエリ文字列のようにエンコードされています。 これは、HTML のフォームで使用されるデフォルトの形式です。 Ajax では、JSON を使用してもっと複雑な構造のデータを処理することもできます。 また、multipart/form-data という別のエンコーディングタイプもあります。 これは、バイナリファイルをアップロードする場合に使用します。 この演習では、URL エンコードされたボディを使用します。 POST リクエストからのデータを解析するには、body-parser パッケージをインストールする必要があります。 このパッケージでは、さまざまな形式でデータをデコードできる一連のミドルウェアを使用できます。
--instructions--
package.json に body-parser モジュールをインストールしてください。 次に、ファイルの先頭でモジュールを require 宣言してください。 そして、bodyParser という名前の変数に保存してください。 URL エンコードされたデータを処理するミドルウェアは、bodyParser.urlencoded({extended: false}) によって返されます。 前のメソッド呼び出しで返された関数を app.use() に渡してください。 いつものように、ミドルウェアはそれに依存するすべてのルートよりも前にマウントする必要があります。
注: extended は、解析を使用する必要があるかどうかを body-parser に伝える設定オプションです。 extended=false の場合は、従来のエンコーディング querystring ライブラリを使用します。 extended=true の場合は、解析に qs ライブラリを使用します。
extended=false を使用する場合、値は文字列または配列のみとなります。 querystring を使用する場合に返されるオブジェクトは、デフォルトの JavaScript Object のプロトタイプを継承しません。つまり、hasOwnProperty や toString などの関数は利用できなくなります。 extended が有効な場合は、データの柔軟性が高まりますが、その点では JSON のほうが優れています。
--hints--
「body-parser」ミドルウェアをマウントする必要があります。
(getUserInput) =>
$.get(getUserInput('url') + '/_api/add-body-parser').then(
(data) => {
assert.isAbove(
data.mountedAt,
0,
'"body-parser" is not mounted correctly'
);
},
(xhr) => {
throw new Error(xhr.responseText);
}
);
--solutions--
/**
Backend challenges don't need solutions,
because they would need to be tested against a full working project.
Please check our contributing guidelines to learn more.
*/