1"use strict";(globalThis.webpackChunkdocusaurus_blog=globalThis.webpackChunkdocusaurus_blog||[]).push([[4792],{6598:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>l,contentTitle:()=>d,default:()=>h,frontMatter:()=>i,metadata:()=>n,toc:()=>a});const n=JSON.parse('{"id":"Knowledge/Browser-Network/HTTP/http-methods","title":"\ud83d\udcc4 HTTP Methods","description":"1. What is the RESTful API ?","source":"@site/docs/Knowledge/Browser-Network/HTTP/http-methods.md","sourceDirName":"Knowledge/Browser-Network/HTTP","slug":"/http-methods","permalink":"/docs/http-methods","draft":false,"unlisted":false,"editUrl":"https://github.com/wuzhe0912/blog-docusaurus/tree/master/docs/Knowledge/Browser-Network/HTTP/http-methods.md","tags":[],"version":"current","frontMatter":{"id":"http-methods","title":"\ud83d\udcc4 HTTP Methods","slug":"/http-methods"},"sidebar":"knowledge","previous":{"title":"Technical Notes","permalink":"/docs/knowledge"},"next":{"title":"\ud83d\udcc4 CORS","permalink":"/docs/cross-origin-resource-sharing"}}');var r=s(4848),o=s(8453);const i={id:"http-methods",title:"\ud83d\udcc4 HTTP Methods",slug:"/http-methods"},d=void 0,l={},a=[{value:"1. What is the RESTful API ?",id:"1-what-is-the-restful-api-",level:2},{value:"2. If GET can also carry data in a request, why should we use POST?",id:"2-if-get-can-also-carry-data-in-a-request-why-should-we-use-post",level:2},{value:"3. What does the PUT method do in HTTP?",id:"3-what-does-the-put-method-do-in-http",level:2},{value:"Example",id:"example",level:3}];function c(e){const t={blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h2,{id:"1-what-is-the-restful-api-",children:"1. What is the RESTful API ?"}),"\n",(0,r.jsx)(t.p,{children:"A RESTful API follows a standardized design style that facilitates communication between different systems on the network. To adhere to REST principles, an API should be predictable and easy to understand. As a frontend developer, the focus is primarily on three aspects:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:"URL Path"}),": Identifies the scope of the client's request, for example:","\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"/products"}),": Likely returns a product list"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"/products/abc"}),': Provides details for the product with ID "abc"']}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:"HTTP Methods"}),": Define the specific action to perform:","\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"GET"}),": Used to retrieve data"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"POST"}),": Used to create new data"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"PUT"}),": Used to update existing data"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"DELETE"}),": Used to delete data"]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:"Status Codes"}),": Provide a quick indication of whether the request was successful and, if not, where the problem might be. Common status codes include:","\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"200"}),": Success"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"404"}),": Requested resource not found"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"500"}),": Server error"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"2-if-get-can-also-carry-data-in-a-request-why-should-we-use-post",children:"2. If GET can also carry data in a request, why should we use POST?"}),"\n",(0,r.jsxs)(t.blockquote,{children:["\n",(0,r.jsx)(t.p,{children:"Since GET can also send requests with data, why do we still need to use POST?"}),"\n"]}),"\n",(0,r.jsx)(t.p,{children:"This is mainly based on four considerations:"}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:"Security"}),": Since GET data is appended to the URL, sensitive data is easily exposed. POST places data in the request body, which is relatively more secure."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:"Data Size Limit"}),": With GET, browsers and servers impose URL length limits (although it varies slightly between browsers, it generally falls around 2048 bytes), which restricts the amount of data. POST nominally has no limit, but in practice, middleware is typically configured to limit data size to prevent malicious attacks flooding with large payloads. For example, Express's ",(0,r.jsx)(t.code,{children:"body-parser"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:"Semantic Clarity"}),": Ensures developers can clearly understand the purpose of the request. GET is typically used for retrieving data, while POST is more suitable for creating or updating data."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:"Immutability"}),': In the HTTP protocol, the GET method is designed to be "safe" \u2014 no matter how many requests are sent, there\'s no concern about modifying data on the server.']}),"\n"]}
1),"\n",(0,r.jsx)(t.h2,{id:"3-what-does-the-put-method-do-in-http",children:"3. What does the PUT method do in HTTP?"}),"\n",(0,r.jsxs)(t.blockquote,{children:["\n",(0,r.jsx)(t.p,{children:"What is the purpose of the PUT method?"}),"\n"]}),"\n",(0,r.jsx)(t.p,{children:"It primarily serves two purposes:"}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsx)(t.li,{children:"Update an existing resource (e.g., modifying user information)"}),"\n",(0,r.jsx)(t.li,{children:"Create a new resource if it doesn't exist"}),"\n"]}),"\n",(0,r.jsx)(t.h3,{id:"example",children:"Example"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"const axios = require('axios');\n\nasync function updateUser(userId, newName) {\n const url = `https://api.example.com/users/${userId}`; // API URL\n const data = {\n name: newName,\n };\n\n try {\n const response = await axios.put(url, data); // Execute PUT request\n console.log('User updated:', response.data); // Output updated user info\n } catch (error) {\n console.log('Error updating user:', error); // Output error info\n }\n}\n\nupdateUser(1, 'Pitt Wu');\n"})})]})}function h(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>d});var n=s(6540);const r={},o=n.createContext(r);function i(e){const t=n.useContext(o);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.