17370845950

RESTful API是一套设计风格，核心是URL仅表示资源（名词），HTTP方法表达操作意图；用fetch时需手动设置headers和JSON.stringify body，且须检查response.ok处理HTTP错误。

RESTful API 不是一种协议或标准，而是一套设计风格和约束条件；它本身不提供任何功能，关键在于你如何用 JavaScript 正确发起符合 REST 原则的请求。

什么是 RESTful API：看 HTTP 方法和资源路径是否匹配

判断一个接口是不是 RESTful，核心就两点：URL 只表示资源（名词），HTTP 方法表达操作意图。比如：

• GET /users → 获取用户列表（不是 GET /getUsers）
• POST /users → 创建新用户（不是 POST /addUser）
• PUT /users/123 → 完整更新 ID 为 123 的用户
• PATCH /users/123 → 局部更新（如只改邮箱）
• DELETE /users/123 → 删除该用户

如果后端把操作写进路径（如 /api/deleteUser?id=123），哪怕用了 JSON 返回，也不是 RESTful —— 这只是“带参数的 HTTP 接口”。

用 fetch 发起 RESTful 请求：别漏掉 method、headers 和 body

JavaScript 中最常用的是 fetch，但它默认不发 Content-Type: application/json，也不自动序列化对象，容易导致后端收不到数据。

常见错误示例：

fetch('/users', {
  method: 'POST',
  body: { name: 'Alice' } // ❌ 错误：body 是对象，但没转成 JSON，也没设 headers
});

正确写法：

fetch('/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'Alice', email: 'alice@example.com' })
})
.then(r => r.json())
.then(data => console.log(data));

注意点：

• GET 请求不能带 body，参数应拼在 URL 后（?page=2&limit=10）或用 URLSearchParams
• PUT/PATCH 更新时，确保传的是完整资源或明确的字段变更（取决于后端约定）
• 401/403 错误往往是因为没带 Authorization header，比如 'Authorization': 'Bearer '

处理响应与错误：别只依赖 .then() 链

fetch 在网络失败时才 reject，而 HTTP 状态码如 404、500 仍会进入 .then()。必须手动检查 response.ok 或 response.status。

推荐写法：

fetch('/users/999')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status = ${response.status}`);
    }
    return response.json();
  
})
  .then(data => console.log(data))
  .catch(err => console.error('请求失败:', err.message));

容易忽略的问题：

• response.json() 本身可能抛错（返回非 JSON 内容时），建议加 try/catch 包裹
• 某些后端对空 body 的 POST 返回 204 No Content，此时调 response.json() 会报错，需先判断 response.status !== 204
• 跨域请求时，如果后端没配 Access-Control-Allow-Origin，浏览器直接拦截，控制台报 CORS 错误，fetch 甚至不会发出请求

用 axios 替代 fetch？注意默认行为差异

如果你用 axios，它默认序列化 data 并加 Content-Type，比 fetch 少些样板代码，但默认不带凭据（cookie/token）。

常见疏漏：

• 发送 cookie 需显式设置 withCredentials: true（且后端必须允许）
• axios.put(url, data) 默认发 PUT，但有些老后端只认 POST + _method=PUT 模拟，得手动配置
• 全局拦截器里修改 config.headers 时，别覆盖已有的 Authorization

例如添加 token：

axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;

真正麻烦的从来不是“怎么发请求”，而是后端对 REST 的理解是否一致——比如把 PATCH 当 PUT 用，或要求所有创建接口都走 POST /api/v1/action/createUser。这时候，文档比规范更管用。