CORSを用いてAPI通信を作ろうとしてからというもの、フロントエンドにもバックエンドにも出てくる、method: “GET”, “PUT”, “DELETE”, “PATCH”などのコード。これが何なのか調べてみました。
method: “GET”や”PUT”はHTTPメソッド！
URLはhttps://x-digger.com/programmingのような形で表現されます。これはリソースの場所を指しているので、URLを見ればどこのリソースからデータを持ってくるかは指定できます。一方で、「何をしたいか」は別に指示する必要があります。これに使われるのがHTTPメソッドです。例えばhttps://x-digger.com/programmingというURLに対し、GETというHTTPメソッドを指定すれば、このURLからリソース情報を取得することができます。
HTTPメソッド
HTTPメソッドには10種類ほど(?)あるようですが、以下の4種類がよく使われます。
- GET：GETはリソースを取得します。
- PUT：データが存在しているか分からない時に使用します。データが存在しているときは更新し、データが存在しない時には新規作成します。
- DELETE：DELETEはリソースを削除します。
- PATCH：データがすでに存在しているものに対して更新をかけます。
フロントエンドでの書き方
まずはコードを見てください。
const headers = new Headers();
headers.append("Content-Type", "application/json");
const requestoptions = {
method: "GET",
headers: headers,
}
fetch(`https://x-digger.com/programming`, requestOptions)
.then((response) => response.json())2行目で”Content-Type”は”application/json”形式であると指定しています。今回重要なのはmethod: “GET”でrequestOptionsを指定していることです。つまり、https://x-digger.com/programmingから取得したjson形式の情報をGET(取得)する、ということを示しています。
では以下の場合はどうでしょうか。
const headers = new Headers();
headers.append("Content-Type", "application/json");
let method = "PUT";
if (message.id > 0) { method = "PATCH"; }if文を見てください。message.id > 0 = message.idが存在する場合 = すでにidを含む行が存在している場合を指しています。この場合はPATCH、つまりデータが既に存在するものに対して更新がかけられます。message.id <0 、まだidを含む行が存在しない場合は、PUT、データを新規作成します。
コメント