HTTP (Hypertext Transfer Protocol) 是一个用于传输超文本的协议。在前端开发中，理解和掌握 HTTP 很重要。本文将详细介绍 HTTP 的概念、工作原理、常用方法和状态码等内容，并提供一些实际示例来帮助您更好地理解。
HTTP 概念
HTTP 本质上是一个客户端-服务端协议，由浏览器和 web 服务器之间进行通信。它采用请求-响应模型，即客户端发送请求，服务器返回响应。在 HTTP 中，客户端可以向服务器发送不同类型的请求，共有五种常见的请求方法：GET、POST、PUT、DELETE 和 PATCH。
HTTP 工作原理
HTTP 协议是基于 TCP/IP 协议栈的，客户端通过向服务器发送 HTTP 请求来获取数据。服务器接收到请求之后，会根据请求的内容做出相应的响应。下图显示了一个典型的 HTTP 请求和响应周期：
- 客户端向服务器发送 HTTP 请求。
- 服务器接收到请求并处理请求。
- 服务器将响应返回给客户端。
- 客户端接收到响应并处理响应。
HTTP 常用方法
GET
GET 方法用于从服务器获取资源。该方法请求的数据会被附加在 URL 上发送给服务器，请求参数可以通过 URL 查询字符串或路径参数传递。GET 方法不应该用于修改服务器上的资源。
示例代码：
fetch('/data?id=123')
.then(response => response.json())
.then(data => console.log(data))POST
POST 方法用于将数据发送到服务器以进行处理。POST 请求通常用于创建新记录或更新现有记录，并且请求数据通常包含在请求正文中。
示例代码：
fetch('/data', {
method: 'post',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: 123, name: 'John Doe' })
})
.then(response => response.json())
.then(data => console.log(data))PUT
PUT 方法用于更新服务器上的资源。PUT 请求的数据也包含在请求正文中。
示例代码：
fetch('/data/123', {
method: 'put',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: 'Jane Doe' })
})
.then(response => response.json())
.then(data => console.log(data))DELETE
DELETE 方法用于删除服务器上的资源。
示例代码：
fetch('/data/123', { method: 'delete' })
.then(response => console.log('Deleted'))PATCH
PATCH 方法用于部分更新服务器上的资源。请求正文中的数据仅包含要更改的属性。
示例代码：
fetch('/data/123', {
method: 'patch',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: 'Jane Doe' })
})
.then(response => response.json())
.then(data => console.log(data))HTTP 状态码
HTTP 响应包含一个状态码，用于指示请求的处理情况。常见的状态码有：
- 200 OK：请求成功
- 301 Moved Permanently：资源已永久移动到新位置
- 400 Bad Request：请求无效或不完整
- 401 Unauthorized：需要进行身份验证才能访问资源
- 404 Not Found：请求的资源不存在
- 500 Internal Server Error：服务器发生错误，无法完成请求
结论
本文详细介绍了 HTTP 的概念、工作原理、常用方法和状态码等内容。通过实际示例演示了如何使用各种 HTTP 方法，并提供了一些常见状态码的解释。掌握
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32038