HTTP4种方法(GET、POST、 PUT和DELETE)

一、GET 和 POST

1. GET方法

特点

  • 用途:用于从服务器获取数据。

  • 参数传递方式:参数会附加在URL后面,以 key=value的形式,通过查询字符串传递,例如:

    http://example.com/page?name=John&age=30
    
  • 可见性:参数是明文的,用户可以直接在浏览器地址栏看到传递的参数。

  • 限制:由于URL长度限制(具体限制因浏览器和服务器而异,但一般为2000字符左右),传输的数据量较小。

  • 幂等性:GET请求是幂等的,重复发送相同的GET请求不会改变服务器的状态。

  • 缓存:GET请求的数据可以被浏览器缓存,也可以被保存在浏览器历史中。

优点

  • 简单直观,适合获取数据。
  • 可以通过书签保存,便于分享。

缺点

  • 参数暴露在URL中,敏感数据(如密码)不安全。
  • 数据量有限,无法上传较大的数据。

2. POST方法

特点

  • 用途:用于向服务器提交数据,例如表单提交或上传文件。

  • 参数传递方式:参数包含在请求体(Body)中,通常是隐式的。例如:

    POST /form HTTP/1.1
    Host: example.com
    Content-Type: application/x-www-form-urlencoded
    Content-Length: 27
    
    name=John&age=30
    
  • 可见性:参数不显示在URL中,用户看不到具体传输的内容。

  • 限制:几乎没有数据大小限制,可以传输大文件。

  • 幂等性:POST请求不是幂等的,每次请求都会对服务器资源产生不同的影响(如新增数据)。

  • 缓存:POST请求默认不会被浏览器缓存。

优点

  • 安全性比GET稍高(参数不直接暴露在URL中,但仍需结合HTTPS来保护数据)。
  • 支持传输大量数据,适合复杂的数据提交。

缺点

  • 不如GET直观,无法通过URL直接分享。
  • 相比GET,性能可能稍低(需要更多的资源来处理请求体)。

3. 总结对比

属性GETPOST
用途获取数据提交数据
参数传递URL查询字符串请求体(Body)
安全性参数明文暴露,不适合敏感数据参数隐藏,但需要HTTPS保护
数据大小受URL长度限制无明显限制
幂等性幂等非幂等
缓存可缓存不可缓存
可见性参数可见参数不可见

选择方法

  • GET:适合只获取数据、无副作用的场景,如加载网页内容。
  • POST:适合提交表单数据、上传文件或其他需要修改服务器数据的场景。

二、PUT 和 DELETE

PUTDELETE 是HTTP协议中的两种方法,主要用于对资源执行修改和删除操作。它们和 GETPOST 一样,都是定义在HTTP/1.1中的基本方法,常用于RESTful API中。

1. PUT 方法

特点

  • 用途:用于创建或更新资源。

    • 如果指定的资源不存在,则创建新资源。
    • 如果指定的资源已存在,则更新该资源。
  • 幂等性:PUT 是幂等的,重复发送相同的 PUT 请求,对服务器的状态不会产生额外影响(相同数据会覆盖现有资源)。

  • 请求体:PUT 请求体中包含需要创建或更新的数据。

示例

场景:创建或更新用户信息。

  • 请求:

    PUT /users/123 HTTP/1.1
    Host: example.com
    Content-Type: application/json
    Content-Length: 47
    
    {
      "username": "johndoe",
      "email": "john@example.com"
    }
    
    • 目标资源:/users/123(用户ID为123的资源)。
    • 请求体:包含用户数据。
  • 响应:

    • 成功创建资源:201 Created
    • 成功更新资源:200 OK

2. DELETE 方法

特点

  • 用途:用于删除服务器上的指定资源。
  • 幂等性:DELETE 也是幂等的。对同一资源发送多次 DELETE 请求,结果是一样的:资源被删除(或已经不存在)。
  • 请求体:通常不需要请求体,资源信息由 URL 指定。

示例

场景:删除用户信息。

  • 请求

    DELETE /users/123 HTTP/1.1
    Host: example.com
    
    • 目标资源:/users/123(用户ID为123的资源)。
  • 响应

    • 删除成功:200 OK204 No Content
    • 资源不存在:404 Not Found

3. PUT 和 DELETE 的区别

属性PUTDELETE
用途创建或更新资源删除资源
幂等性幂等幂等
请求体包含资源数据,用于创建或更新通常不需要请求体
响应状态码200 OK(更新成功),201 Created(创建成功)200 OK204 No Content,或 404 Not Found
对服务器的影响写操作(新增或覆盖资源)删除操作

4. PUT 和 POST 的对比

  • PUT 是幂等的,通常指定资源的完整路径(如/users/123),强调资源替换
  • POST 不是幂等的,通常操作资源集合(如/users),强调资源新增

5. RESTful API 实践建议

  • PUT:用来对已有资源进行修改,或在知道资源路径的情况下创建资源。
  • DELETE:用来删除指定资源,保证资源唯一性。
  • POST:用来新增资源,尤其在路径未知或创建规则复杂时。

三、总结

1. GET (读取数据)

  • 作用从服务器获取数据

  • 参数位置:通过 URL 的查询字符串传递参数。

  • 请求体:无请求体。

  • 幂等性:幂等,多次请求结果相同。

  • 适用场景:加载网页内容、获取用户信息等。

  • 示例:

    GET /users/123 HTTP/1.1
    

2. POST (创建数据)

  • 作用向服务器提交数据,通常用于创建新资源

  • 参数位置:数据在请求体中传递。

  • 请求体:有请求体(如表单数据或 JSON)。

  • 幂等性:非幂等,每次请求可能创建新的资源。

  • 适用场景:提交表单、新增用户、上传文件等。

  • 示例:

    POST /users HTTP/1.1
    Content-Type: application/json
    
    {
      "username": "johndoe",
      "email": "john@example.com"
    }
    

3. PUT (创建或更新数据)

  • 作用创建或更新指定的资源

  • 参数位置:数据在请求体中传递。

  • 请求体:有请求体(包含完整的资源数据)。

  • 幂等性:幂等,多次请求结果一致。

  • 适用场景:更新用户信息、替换文件等。

  • 示例 :

    PUT /users/123 HTTP/1.1
    Content-Type: application/json
    
    {
      "username": "newname",
      "email": "new@example.com"
    }
    

4. DELETE (删除数据)

  • 作用从服务器删除指定的资源

  • 参数位置:资源通过 URL 指定。

  • 请求体:通常无请求体。

  • 幂等性:幂等,多次请求结果相同(资源被删除)。

  • 适用场景:删除用户、删除文件等。

  • 示例:

    DELETE /users/123 HTTP/1.1
    

总结对比表

方法作用请求体幂等性适用场景
GET查询数据获取数据,例如用户信息。
POST创建资源创建新资源,例如新增用户。
PUT更新(或创建)资源有(完整资源数据)更新或替换资源,例如修改用户。
DELETE删除资源无(一般)删除指定资源,例如删除用户。

简单来说:

  • GET = 查。
  • POST = 增。
  • PUT = 改(或覆盖)。
  • DELETE = 删。

四、HTTP状态码合集

状态码编码描述
1xx 信息性响应
100Continue继续,客户端应继续其请求
101Switching Protocols服务器正在切换协议
102Processing服务器已收到请求,但尚未处理完成(WebDAV)
103Early Hints预加载资源的早期提示
2xx 成功响应
200OK请求成功
201Created请求成功并创建了资源
202Accepted请求已接受,但尚未处理完成
203Non-Authoritative Information请求成功,但返回的内容可能来自第三方
204No Content请求成功,但没有返回内容
205Reset Content请求成功,客户端应重置文档视图
206Partial Content服务器成功处理了部分请求(断点续传)
207Multi-Status返回多个状态码(WebDAV)
208Already Reported资源已被报告(WebDAV)
226IM Used服务器已完成 GET 请求,并使用了实例操作
3xx 重定向
300Multiple Choices请求有多个可能的响应
301Moved Permanently资源已永久移动
302Found资源暂时移动(以前叫“Moved Temporarily”)
303See Other资源可在另一个 URL 获取
304Not Modified资源未修改,可使用缓存
305Use Proxy必须通过代理访问(已废弃)
306Switch Proxy该状态码已被废弃
307Temporary Redirect临时重定向,请求方法不变
308Permanent Redirect永久重定向,请求方法不变
4xx 客户端错误
400Bad Request客户端请求格式错误
401Unauthorized需要身份验证
402Payment Required预留状态码,未广泛使用
403Forbidden服务器拒绝请求
404Not Found请求的资源不存在
405Method Not Allowed请求方法被禁止
406Not Acceptable服务器无法满足请求的内容格式
407Proxy Authentication Required需要代理身份验证
408Request Timeout请求超时
409Conflict资源冲突(例如并发修改)
410Gone资源已永久删除
411Length Required需要指定 Content-Length
412Precondition Failed请求头条件失败
413Payload Too Large请求体过大,服务器无法处理
414URI Too Long请求的 URI 过长
415Unsupported Media Type不支持的媒体类型
416Range Not Satisfiable请求的范围无效
417Expectation Failed服务器无法满足 Expect 头的要求
418I’m a teapot传统愚人节彩蛋,表示“我是一个茶壶”
421Misdirected Request请求被发送到错误的服务器
422Unprocessable Entity请求格式正确,但无法处理(WebDAV)
423Locked资源被锁定(WebDAV)
424Failed Dependency依赖的请求失败(WebDAV)
425Too Early服务器拒绝处理可能被重放的请求
426Upgrade Required需要升级协议
428Precondition Required需要前置条件
429Too Many Requests客户端发送的请求过多(限流)
431Request Header Fields Too Large请求头字段太大
451Unavailable For Legal Reasons由于法律原因不可用
5xx 服务器错误
500Internal Server Error服务器内部错误
501Not Implemented服务器不支持该请求
502Bad Gateway服务器作为网关时,收到无效响应
503Service Unavailable服务器暂时不可用(过载或维护)
504Gateway Timeout服务器作为网关时,未及时收到上游服务器响应
505HTTP Version Not Supported服务器不支持该 HTTP 版本
506Variant Also Negotiates服务器内部配置错误
507Insufficient Storage服务器存储空间不足(WebDAV)
508Loop Detected服务器检测到无限循环(WebDAV)
510Not Extended服务器需要扩展请求
511Network Authentication Required需要网络身份验证

这个表格已经经过核对,符合最新的 HTTP 标准。

Vue通常使用Axios作为Http库来发送HTTP请求。下面是一个通用的Axios封装,可以用于发送getputpostdelete请求。 首先,我们需要在项目中安装Axios依赖。可以使用npm或yarn命令来安装: ``` npm install axios ``` 或者 ``` yarn add axios ``` 然后,我们可以在项目中创建一个utils文件夹,并在其中创建一个http.js文件。在http.js文件中,我们可以编写通用的Axios封装代码: ```javascript import axios from 'axios'; // 创建一个axios实例 const instance = axios.create({ baseURL: 'http://api.example.com' // 设置请求的默认基本URL }); // 请求拦截器,可以在请求发送之前做一些处理,比如添加请求头 instance.interceptors.request.use( config => { // 在请求发送之前添加一个Authorization请求头(如果需要) config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token'); return config; }, error => { return Promise.reject(error); } ); // 响应拦截器,可以在请求返回之后做一些处理,比如处理错误信息 instance.interceptors.response.use( response => { // 在请求成功返回之后处理响应数据 return response; }, error => { // 在请求失败返回之后处理错误信息 return Promise.reject(error.response.data); } ); // 封装get请求 export const get = (url, params) => { return instance.get(url, { params }); }; // 封装put请求 export const put = (url, data) => { return instance.put(url, data); }; // 封装post请求 export const post = (url, data) => { return instance.post(url, data); }; // 封装delete请求 export const del = url => { return instance.delete(url); }; ``` 以上是一个简单的对Axios进行封装的例子。你可以根据自己的项目需求进行相应的修改扩展。在组件中使用getputpostdelete方法来发送不同类型的请求。示例代码如下: ```javascript import { get, put, post, del } from '@/utils/http'; // 使用get请求 get('/api/users').then(response => { console.log(response.data); }).catch(error => { console.error(error); }); // 使用put请求 put('/api/user/1', { name: 'John', age: 30 }).then(response => { console.log(response.data); }).catch(error => { console.error(error); }); // 使用post请求 post('/api/user', { name: 'John', age: 30 }).then(response => { console.log(response.data); }).catch(error => { console.error(error); }); // 使用delete请求 del('/api/user/1').then(response => { console.log(response.data); }).catch(error => { console.error(error); }); ``` 以上就是一个通用的Axios封装,可以用于发送getputpostdelete请求。通过这种封装,可以简化统一项目中的HTTP请求处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cyan_Jiang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值