HTTP 之请求方法（三）

1. GET：请求指定的资源。

GET 请求应该只用于获取数据，而不会导致服务器上的状态变化。

javascript 复制代码

//通常用于请求页面或数据。
fetch('http://www.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

2. POST：向服务器提交新的资源。

POST 请求通常用于表单提交或上传文件，数据在请求体中。

javascript 复制代码

//提交用户注册信息。
fetch('http://www.example.com/register', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    username: 'newuser',
    password: 'newpass'
  })
})
.then(response => response.json())
.then(data => console.log('Registered:', data))
.catch(error => console.error('Error:', error));

3. PUT：更新服务器上的现有资源。

如果资源不存在，则可能会创建新资源。PUT 请求是幂等的。

javascript 复制代码

//更新用户的配置信息。
fetch('http://www.example.com/settings', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    theme: 'dark',
    notifications: true
  })
})
.then(response => response.json())
.then(data => console.log('Settings Updated:', data))
.catch(error => console.error('Error:', error));

4. DELETE：从服务器删除指定的资源。

DELETE 请求通常用于删除资源。

javascript 复制代码

//删除用户的账户。
fetch('http://www.example.com/users/123', {
  method: 'DELETE'
})
.then(response => response.json())
.then(data => console.log('Delete Response:', data))
.catch(error => console.error('Error:', error));

5. HEAD：请求资源的响应头信息，不返回响应体。

HEAD 请求与 GET 类似，但不包括响应体。

javascript 复制代码

//检查资源是否存在或获取资源的元数据。
fetch('http://www.example.com/image.png', {
  method: 'HEAD'
})
.then(response => {
  console.log(`Content-Type: ${response.headers.get('Content-Type')}`);
})
.catch(error => console.error('Error:', error));

6. OPTIONS：描述目标资源的通信选项。

OPTIONS 请求通常用于跨域资源共享（CORS）的预检请求。

javascript 复制代码

//获取服务器支持的 HTTP 方法。
fetch('http://www.example.com/api/resource', {
  method: 'OPTIONS'
})
.then(response => response.json())
.then(data => console.log('Allowed Methods:', data))
.catch(error => console.error('Error:', error));

7. TRACE：沿着到目标资源的路径执行一个消息环回测试。

javascript 复制代码

TRACE 请求通常用于诊断。

javascript 复制代码

fetch('http://www.example.com/trace', {
  method: 'TRACE'
})
.then(response => response.text())
.then(data => console.log('Trace Response:', data))
.catch(error => console.error('Error:', error));

8. CONNECT：建立一个到服务器的隧道，通常用于 SSL 加密的代理请求。

不常用于前端开发中，主要用于通过代理服务器建立安全连接。

通常不会在前端代码中看到 CONNECT 方法的使用。

9. PATCH：对资源进行部分更新。

PATCH 请求允许只发送需要更新的部分数据。

javascript 复制代码

fetch('http://www.example.com/users/123', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    email: '[email protected]'
  })
})
.then(response => response.json())
.then(data => console.log('User Updated:', data))
.catch(error => console.error('Error:', error));

HTTP 之 请求方法（三）

HTTP 之请求方法（三）