Axios前后端对接完全指南

qqqww
108 阅读5分钟

接口的定义

API（Application Programming Interface）接口是前端和后端之间通信的桥梁，定义了数据交换的规则和格式。

一、API请求格式

1. 请求URL（Request URL）

api.example.com/api/v1/user…

  • 协议：http/https
  • 域名：api.example.com
  • 路径：/api/v1/users/123
  • 端口：可选，如 :8080 其中
  • 路径（Path） ：接口的主路径，通常与资源的标识符（ID）相关。例如：
    • /api/users：获取所有用户。
    • /api/users/123：获取ID为123的用户信息。
  • 查询参数（Query Parameters）：附加在URL后的键值对，用于过滤、分页等。
    • /api/users?page=2&limit=10：获取第2页，每页10个用户。

2. 请求方法（HTTP Methods）

  • GET：获取数据，参数在URL中
  • POST：创建新数据，参数在请求体中
  • PUT：完整更新数据
  • PATCH：部分更新数据
  • DELETE：删除数据
  • OPTIONS：获取当前资源的支持的HTTP方法，通常用于跨域请求时，浏览器会自动发起OPTIONS请求来确认服务器支持的请求方法。

3. 请求头（Request Headers）

{ 'Content-Type': 'application/json', 'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...', 'Accept': 'application/json', 'User-Agent': 'Mozilla/5.0...' }

Content-Type：告诉服务器请求体的数据格式。常见的格式包括：

  • application/json：请求体是JSON格式数据。
  • application/x-www-form-urlencoded：传统表单提交格式。
  • multipart/form-data：用于文件上传。
  • text/plain：纯文本数据。

Authorization：用于身份验证，通常包含JWT或其他Token。

  • Bearer ：用于传递Bearer Token，例如JWT。

Accept：告诉服务器客户端期望接收的响应格式。例如：

  • application/json：客户端希望服务器返回JSON格式的响应。
  • application/xml：客户端希望服务器返回XML格式的响应。
  • User-Agent：客户端的应用信息，可以用来标识发起请求的客户端设备或浏览器。
  • X-Requested-With：通常用于标识Ajax请求，避免浏览器与非浏览器请求混淆。
  • Origin：在跨域请求中，表示发起请求的源（来源）。

4. 请求参数

查询参数（Query Parameters）- GET请求

api.example.com/users?page=…

路径参数（Path Parameters）

api.example.com/users/{id}

api.example.com/users/123

5. 请求体（Body）

请求体是通过POST、PUT、PATCH等方法发送给后端的数据。请求体的格式通常依赖于Content-Type。

JSON：常用于现代Web应用，格式清晰，易于理解。 Form Data：用于传统的表单提交，尤其是在上传文件时。 XML：用于数据交换较为复杂的应用，但如今不如JSON流行 Multipart Form Data：主要用于文件上传。

二、API响应格式

1. 响应头（Headers）

响应头包含关于响应的元数据。常见的响应头字段包括：

  • Content-Type：告诉客户端响应体的数据格式。例如：

    • application/json：响应体为JSON格式数据。
    • text/html：响应体为HTML格式数据。

  • Cache-Control：控制缓存策略，例如：

    • no-cache：不缓存该响应。
    • max-age=3600：缓存一小时。

  • Location：在创建资源时（如POST请求），如果资源被创建，服务器通常会返回该字段，指示新资源的URL。

2. 响应结构（Response）

响应状态码

  • 200：成功
  • 201：创建成功
  • 400：请求参数错误
  • 401：未授权
  • 403：禁止访问
  • 404：资源不存在
  • 500：服务器错误

3. 响应体（Body）

响应体是服务器返回给客户端的数据，通常使用JSON格式进行交换。下面是一些常见的响应体格式：

JSON格式：通常包含status、message、data等字段，用于表示请求的处理结果和相关数据。

{ "status": "success", "message": "User created successfully", "data": { "userId": 123, "username": "john_doe" } }

错误响应：当请求出现错误时，响应体通常会包含错误的详细信息。

{ "status": "error", "message": "Invalid username or password" }

空响应：如果请求成功但不需要返回数据，响应体可以为空。 {}

分页数据：当返回的数据需要分页时，响应体会包含分页信息。

{ "status": "success",
"message": "Users fetched successfully", "data": [ {"userId": 1, "username": "john_doe"}, {"userId": 2, "username": "jane_doe"} ], "pagination": { "page": 1, "limit": 10, "total": 100 } }

补充

1. response.data 的用法

response.data 是最常见的用法，它指的是后端返回的响应体。在大多数情况下，后端返回的数据直接位于 data 字段中。

  • 场景 1：响应结构直接包含数据

    假设后端返回的响应结构如下：

    {
  "status": "success",
  "message": "Operation successful",
  "data": {
    "userId": 1,
    "username": "john_doe"
  }
}

    在这种情况下，前端在接收到响应后，可以直接访问 response.data 获取响应体中的 data 部分。即：

    javascript
复制编辑
axios.get('/api/user')
  .then(response => {
    console.log(response.data);  // { "userId": 1, "username": "john_doe" }
  });

    这里的 response.data 是整个响应对象，它包含了 status, message, 和 data 等字段。如果你直接需要 data 字段中的数据，通常可以这么做：

    axios.get('/api/user')
  .then(response => {
    console.log(response.data.data);  // { "userId": 1, "username": "john_doe" }
  });

2. response.data.data 的用法

response.data.data 适用于后端响应结构的 data 字段内部再包含一层 data 数据的情况。这种情况通常用于分页或者返回多个数据集合的响应。

  • 场景 2：响应结构内嵌数据

    假设后端返回的响应结构如下：

    {
  "status": "success",
  "message": "Fetched users successfully",
  "data": {
    "page": 1,
    "limit": 10,
    "total": 50,
    "data": [
      { "userId": 1, "username": "john_doe" },
      { "userId": 2, "username": "jane_doe" }
    ]
  }
}

    在这个结构中，data 字段本身包含了分页信息和数据数组，并且这个数据数组实际上是嵌套在 data 字段下的 data 字段中。所以你需要访问 response.data.data 来获取真正的数据内容。

    例如：

    javascript
复制编辑
axios.get('/api/users')
  .then(response => {
    console.log(response.data.data);  // [ { "userId": 1, "username": "john_doe" }, { "userId": 2, "username": "jane_doe" } ]
  });

    这里的 response.data 是响应体，其中包含了分页信息和数据集合，而实际的数据集位于 data.data 中。

avatar
文章
阅读
粉丝