RESTful API

原创 已于 2026-02-01 18:25:26 修改 · 698 阅读 · 13 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#restful
于 2026-02-01 18:22:37 首次发布
https://api.example.com                // 根路径

1. 获取资源列表

描述：获取所有用户信息。
方法：GET
URL：/api/users
响应：

[
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" }
]

前端调用：

fetch('https://api.example.com/api/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
axios.get('https://api.example.com/api/users')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));
  • axios.get：发起一个GET请求。
  • .then(response => console.log(response.data))：
  • 请求成功时，response 是 Axios 返回的响应对象。
  • response.data 是服务器返回的实际数据。
  • .catch(error => console.error('Error:', error))：
  • 请求失败时，error 是 Axios 提供的错误对象。
  • error 包含了错误详情，例如网络错误、服务器返回的错误状态码等

优化错误处理

  • error 是 Axios 提供的错误对象，通常包含以下属性：
  • error.message：错误的描述信息。
  • error.response：如果服务器返回了响应（如 4xx 或 5xx 状态码），error.response 会包含响应的详细信息。
  • error.response.data：服务器返回的错误数据。
  • error.response.status：HTTP 状态码（如 404、500）。
  • error.response.headers：响应头。
  • error.request：如果请求已发出但没有收到响应（如网络错误），error.request 会包含请求的详细信息。

优化错误处理

为了更好地处理错误，可以根据 error.response 和 error.request 区分不同类型的错误：

axios.get('https://api.example.com/api/users')
  .then(response => {
    // 请求成功，打印数据
    console.log('Data:', response.data);
  })
  .catch(error => {
    if (error.response) {
      // 服务器返回了错误状态码
      console.error('Server Error:', error.response.data);
      console.error('Status Code:', error.response.status);
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.error('Network Error:', error.message);
    } else {
      // 其他错误
      console.error('Error:', error.message);
    }
  });
  • error 是 Axios 自动传递的参数，不需要显式定义。
  • error 对象包含详细的错误信息，可以通过 error.response 和 error.request 区分不同类型的错误。
  • 优化错误处理：根据错误类型（服务器错误、网络错误、其他错误）分别处理，提供更清晰的调试信息。

2. 获取单个资源

描述：获取指定ID的用户信息。
方法：GET
URL：/api/users/{id}
响应：

{ "id": 1, "name": "Alice" }

前端调用：

const userId = 1;
fetch(`https://api.example.com/api/users/${userId}`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
const userId = 1;
axios.get(`https://api.example.com/api/users/${userId}`)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

3. 创建资源

描述：创建一个新用户。
方法：POST
URL：/api/users
请求体：

{ "name": "Charlie" }

响应

{ "id": 3, "name": "Charlie" }

前端调用：

const newUser = { name: 'Charlie' };
fetch('https://api.example.com/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(newUser)
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
const newUser = { name: 'Charlie' };
axios.post('https://api.example.com/api/users', newUser)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

4. 更新资源

描述：更新指定ID的用户信息。
方法：PUT
URL：/api/users/{id}
请求体：

{ "name": "Alice Smith" }

响应：

{ "id": 1, "name": "Alice Smith" }

前端调用：

const userId = 1;
const updatedUser = { name: 'Alice Smith' };
fetch(`https://api.example.com/api/users/${userId}`, {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(updatedUser)
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
const userId = 1;
const updatedUser = { name: 'Alice Smith' };
axios.put(`https://api.example.com/api/users/${userId}`, updatedUser)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

5. 部分更新资源

描述：部分更新指定ID的用户信息。
方法：PATCH
URL：/api/users/{id}
请求体：

{ "name": "Alice Johnson" }

响应：

{ "id": 1, "name": "Alice Johnson" }

前端调用：

const userId = 1;
const partialUpdate = { name: 'Alice Johnson' };
fetch(`https://api.example.com/api/users/${userId}`, {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(partialUpdate)
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
const userId = 1;
const partialUpdate = { name: 'Alice Johnson' };
axios.patch(`https://api.example.com/api/users/${userId}`, partialUpdate)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

6. 删除资源

描述：删除指定ID的用户。
方法：DELETE
URL：/api/users/{id}
响应：204 No Content
前端调用：

const userId = 1;
fetch(`https://api.example.com/api/users/${userId}`, {
  method: 'DELETE'
})
  .then(response => {
    if (response.status === 204) {
      console.log('User deleted successfully');
    }
  })
  .catch(error => console.error('Error:', error));
const userId = 1;
axios.delete(`https://api.example.com/api/users/${userId}`)
  .then(response => {
    if (response.status === 204) {
      console.log('User deleted successfully');
    }
  })
  .catch(error => console.error('Error:', error));

7. 过滤资源

描述：根据条件过滤用户列表。
方法：GET
URL：/api/users?name=Alice
响应：

[
  { "id": 1, "name": "Alice" }
]

前端调用：

const query = 'Alice';
fetch(`https://api.example.com/api/users?name=${query}`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
const query = 'Alice';
axios.get(`https://api.example.com/api/users?name=${query}`)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

8. 分页获取资源

描述：分页获取用户列表。
方法：GET
URL：/api/users?page=1&limit=10
响应：

{
  "data": [
    { "id": 1, "name": "Alice" },
    { "id": 2, "name": "Bob" }
  ],
  "pagination": {
    "page": 1,
    "limit": 10,
    "total": 100
  }
}

前端调用：

const page = 1;
const limit = 10;
fetch(`https://api.example.com/api/users?page=${page}&limit=${limit}`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
const page = 1;
const limit = 10;
axios.get(`https://api.example.com/api/users?page=${page}&limit=${limit}`)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

9. 嵌套资源

描述：获取指定用户的所有订单。
方法：GET
URL：/api/users/{userId}/orders
响应：

[
  { "id": 101, "product": "Laptop" },
  { "id": 102, "product": "Phone" }
]

前端调用：

const userId = 1;
fetch(`https://api.example.com/api/users/${userId}/orders`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
const userId = 1;
axios.get(`https://api.example.com/api/users/${userId}/orders`)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

10. 搜索资源

描述：搜索用户。
方法：GET
URL：/api/users/search?q=Alice
响应：

[
  { "id": 1, "name": "Alice" }
]

前端调用：

const searchQuery = 'Alice';
fetch(`https://api.example.com/api/users/search?q=${searchQuery}`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

const searchQuery = 'Alice';
axios.get(`https://api.example.com/api/users/search?q=${searchQuery}`)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

总结 ：

（1）Fetch

  • Fetch API：使用 fetch 发起HTTP请求，处理响应和错误。
  • 异步处理：通过 .then() 和 .catch() 处理异步操作。
  • 请求配置：
  • method：指定HTTP方法（GET、POST、PUT、PATCH、DELETE）。
  • headers：设置请求头，如 Content-Type。
  • body：传递请求数据（JSON格式）。
  • URL参数：动态拼接URL参数（如 userId、query）。
  • 错误处理：捕获并处理网络错误或API返回的错误。

（2）Axios：

  • 语法简洁，支持Promise。
  • 自动转换JSON数据。
  • 支持请求和响应拦截器。
  • 提供更强大的错误处理能力。
通用配置：

1. 可以设置全局默认配置，例如 baseURL：

axios.defaults.baseURL = 'https://api.example.com';

2. 可以设置请求头：

axios.defaults.headers.common['Authorization'] = 'Bearer token';
错误处理：
  • 使用 .catch() 捕获错误。
  • 可以通过 error.response 获取服务器返回的错误信息：
.catch(error => {
  if (error.response) {
    console.error('Server Error:', error.response.data);
  } else {
    console.error('Network Error:', error.message);
  }
});

Restful API是什么、为什么、怎么使用
渐若窥宏大的博客
03-21 1万+
Restful API 文章目录Restful API1、REST是什么以及它的 6 个限制REST是什么？REST的6个限制2、 Restful是什么Restful是什么RESTful API具体什么样子？现实举例从资源出发3、为什么要使用RestfulHTTP协议-URLHTTP协议-请求HTTP协议-响应RESTful架构与其他架构的区别效率和易用性安全性4、 如何使用Restful资源路径...
RestFul API 详解
wynn的博客
08-22 7485
RESTful API 经常也被叫做 REST API，它是基于 REST 构建的 API。RESTful API 可以让你看到 URL+Http Method 就知道这个 URL 是干什么的，让你看到了 HTTP 状态码（status code）就知道请求结果如何。
Restful API
LYB的博客
06-25 1087
RESTful API是一种遵循REST架构风格的API设计规范，其核心思想是将网络资源抽象化并通过HTTP动词进行操作。主要特点包括：URI代表资源（使用复数名词）、HTTP方法（GET/POST/PUT/DELETE等）对应操作、统一状态码和响应格式。相较于传统面向操作的API设计，RESTful风格将关注点转向资源本身，使用统一的资源路径配合不同HTTP方法实现CRUD操作，使系统更加清晰规范。设计要点还包含版本控制、过滤参数和超媒体API等扩展能力。这种设计风格提高了API的可读性、可维护性和扩展性
什么是RESTful API?
热门推荐
Evan's Blog ٩(๑❛ᴗ❛๑)۶
12-25 10万+
        提到RESTful API 大家势必或多或少听说过。但是什么是RESTful API ？如何理解RESTful API 呢？请大家耐心读完这篇文章，相信您读完后一定会有一个更好的理解。我个人认为，要弄清楚什么是RESTful API,首先要弄清楚什么是REST。REST 全称：REpresentational State Transfer，英文翻译过来就是“表现层状态转化”。如果...
什么是RESTful API?与非RESTful API有和区别
2301_77170676的博客
07-09 488
RESTful是一种基于HTTP协议的软件架构风格，由Roy Fielding在2000年提出。它将网络资源抽象为URI，通过标准HTTP方法（GET/POST/PUT/DELETE）进行操作，强调无状态和统一接口。RESTful API使用名词复数URI（如/users），区别于非RESTful风格使用动词的URI（如/getUser）。其优势在于简洁性、可扩展性和标准化的状态码使用，是现代Web服务的主流设计方式。
原子范数前向后贪婪算法（FoBa-AN）实现
foundbug999的博客
06-17 212
原子范数前向后贪婪算法（FoBa-AN）实现，以线谱估计为例（原子为复指数向量）
正则表达式从入门到精通：re模块实战
2601_96023685的博客
06-20 160
正则表达式（Regular Expression，简称 regex 或 regexp）是处理文本的瑞士军刀。它使用一种高度简洁的语法来描述字符串的模式，能够进行强大的搜索、替换、提取和验证操作。在 Python 中，re 模块提供了完整的正则表达式支持，是每个开发者工具箱中不可或缺的利器。
易语言源码易语言socket连接超时源码例程
06-21
易语言源码易语言socket连接超时源码例程
易语言源码易语言T2D图形系统架构
最新发布
06-21
易语言源码易语言T2D图形系统架构
无人机基于多 Dubins 路径段协同路径规划及粒子群优化的无人机在复杂威胁环境中的路径规划策略（Matlab实现）
06-21
【无人机】基于多 Dubins 路径段协同路径规划及粒子群优化的无人机在复杂威胁环境中的路径规划策略（Matlab实现）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值