AJAX 知识篇(2)：Axios的核心配置

关于AJAX与Axios的基础知识我们已在上一篇文章中详细的讲述了，这篇文章我们重点讲以下Axios的进阶用法

一、HTTP报文

HTTP（超文本传输协议）是互联网上应用最为广泛的分布式、协作式、超媒体信息系统的通信协议。HTTP 报文是 HTTP 协议中用于客户端和服务器之间通信的数据格式 。HTTP 报文分为请求报文 和响应报文。

1.1 HTTP 请求报文

请求报文是浏览器按照 HTTP 协议要求的格式，发送给服务器的内容，HTTP 请求报文由以下几部分组成：

请求行（Request Line）

请求头（Request Headers）

请求体（Request Body）

1.1.1 请求行（Request Line）

请求行是请求报文的第一行，包含三个部分：

请求方法（Request Method） ：指定客户端希望服务器执行的操作，如 GET、POST、PUT、DELETE 等。
请求目标（Request Target）：通常是一个 URL，表示请求的资源路径。
HTTP 版本（HTTP Version） ：指定使用的 HTTP 协议版本，如 HTTP/1.1 或 HTTP/2。

1.1.2 请求头（Request Headers）

请求头包含多个键值对，用于向服务器传递额外的信息，如客户端的类型、请求的资源类型、认证信息等。请求头以 键: 值 的形式表示，每行一个键值对。

常见的请求头

Host：指定请求的主机名和端口号。Host: www.example.com
User-Agent ：客户端的类型和版本信息。
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
Accept ：客户端可以接受的响应内容类型。
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8
Accept-Language ：客户端可以接受的语言。
Accept-Language: en-US,en;q=0.5
Accept-Encoding ：客户端可以接受的编码方式。
Accept-Encoding: gzip, deflate, br
Content-Type ：请求体的媒体类型。
Content-Type: application/json
Content-Length ：请求体的长度。
Content-Length: 123
Authorization ：认证信息。
Authorization: Bearer your-token

1.1.3 请求体（Request Body）

请求体是请求报文的最后一部分，包含客户端向服务器提交的数据。请求体的内容和格式取决于请求方法和 Content-Type 请求头。

1.2 HTTP 响应报文

HTTP 响应报文是服务器对客户端请求的回应，它包含了响应的状态信息、响应头和响应体等部分。通过分析 HTTP 响应报文，客户端可以了解请求是否成功以及服务器返回的数据内容。

HTTP 响应报文由以下几部分组成：

状态行（Status Line）
响应头（Response Headers）
响应体（Response Body）

1.2.1 状态行（Status Line）

状态行是响应报文的第一行，包含三个部分：

HTTP 版本（HTTP Version） ：指定使用的 HTTP 协议版本，如 HTTP/1.1 或 HTTP/2。
状态码（Status Code） ：一个三位数字，表示请求的处理结果，如 200 表示成功，404 表示未找到。
原因短语（Reason Phrase） ：对状态码的简短描述，如 OK、Not Found 等。

1.2.2 响应头（Response Headers）

响应头包含多个键值对，用于向客户端传递额外的信息，如响应的内容类型、内容长度、缓存策略等。响应头以 键: 值 的形式表示，每行一个键值对。

常见的响应头

Content-Type ：响应体的媒体类型。
Content-Type: application/json
Content-Length ：响应体的长度。
Content-Length: 123
Server ：服务器的类型和版本信息。
Server: Apache/2.4.41 (Ubuntu)
Date ：响应生成的日期和时间。
Date: Fri, 10 Oct 2025 12:34:56 GMT
Cache-Control ：缓存策略。
Cache-Control: max-age=3600
Set-Cookie ：设置客户端的 Cookie。
Set-Cookie: session_token=abc123; Path=/; HttpOnly

1.2.3 响应体（Response Body）

响应体是响应报文的最后一部分，包含服务器返回的数据。响应体的内容和格式取决于 Content-Type 响应头。

1.2.4 HTTP 状态码

1xx（信息性状态码）

表示临时响应，客户端需继续操作。

100 Continue：服务器已收到请求头，客户端应继续发送请求体。
101 Switching Protocols：服务器应客户端要求切换协议（如升级到WebSocket）。

2xx（成功状态码）

表示请求已被成功处理。

200 OK：请求成功，响应包含请求结果。
201 Created：请求已完成且新资源已创建（如POST请求后返回）。
204 No Content：请求成功，但响应无返回内容（如DELETE请求后）。

3xx（重定向状态码）

表示需进一步操作以完成请求。

301 Moved Permanently：资源已永久重定向到新URL。
302 Found：资源临时重定向到新URL。
304 Not Modified：资源未修改，客户端可使用缓存版本。

4xx（客户端错误状态码）

表示请求存在语法错误或无法完成。

400 Bad Request：请求语法错误或参数无效。
401 Unauthorized：请求需身份验证（如未登录）。
403 Forbidden：服务器拒绝执行请求（如权限不足）。
404 Not Found：请求资源不存在。

5xx（服务器错误状态码）

表示服务器处理请求时发生错误。

500 Internal Server Error：服务器内部错误（如代码异常）。
502 Bad Gateway：网关或代理服务器从上游服务器收到无效响应。
503 Service Unavailable：服务器暂时不可用（如过载或维护）。

二、Axios常用的请求方式

1.1 GET请求:params 属性

GET请求用于从服务器获取数据。Axios提供了axios.get方法来发送GET请求。同时GET请求也是Axios的默认请求方式。

javascript 复制代码

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data); // 处理响应数据
  })

在 Axios 中，GET 请求的参数可以通过 params 属性在请求配置中传递。这些参数会被自动序列化并附加到请求的 URL 上。

javascript 复制代码

// 示例 1：传递单个参数
axios.get('https://api.example.com/data', {
  params: {
    id: 1
  }
})
.then(response => {
  console.log(response.data); // 处理响应数据
})

在这个示例中，params 对象包含一个键值对 { id: 1 }。Axios 会将这些参数序列化为查询字符串并附加到 URL 上，最终请求的 URL 会变成 https://api.example.com/data?id=1。

javascript 复制代码

// 示例 2：传递多个参数
axios.get('https://api.example.com/data', {
  params: {
    id: 1,
    type: 'admin',
    active: true
  }
})
.then(response => {
  console.log(response.data); // 处理响应数据
})

在这个示例中，params 对象包含多个键值对。Axios 会将这些参数序列化为查询字符串并附加到 URL 上，最终请求的 URL 会变成 https://api.example.com/data?id=1\&type=admin\&active=true。

如果需要传递数组作为参数，Axios 会自动将数组序列化为查询字符串。

javascript 复制代码

// 示例 3：传递数组作为参数
axios.get('https://api.example.com/data', {
  params: {
    ids: [1, 2, 3]
  }
})
.then(response => {
  console.log(response.data); // 处理响应数据
})

在这个示例中，params 对象中的 ids 是一个数组。Axios 会将数组序列化为查询字符串并附加到 URL 上，最终请求的 URL 会变成 https://api.example.com/data?ids=1\&ids=2\&ids=3。

1.2 POST 请求：data参数

POST 请求用于向服务器提交数据，通常用于创建新的资源。在 Axios 中，可以通过 axios.post 方法发送 POST 请求。POST 请求的数据通常包含在请求体中，可以是 JSON、表单数据或其他格式。

javascript 复制代码

// 发送 JSON 数据
axios.post('https://api.example.com/data', {
  name: 'John',
  age: 30,
  email: 'john@example.com'
})
.then(response => {
  console.log(response.data); // 处理响应数据
})

URL ：https://api.example.com/data 是请求的地址。
数据：第二个参数是一个 JavaScript 对象，表示要提交的数据。Axios 会自动将这个对象序列化为 JSON 格式，并设置 Content-Type 为 application/json。

发送表单数据（FormData）

javascript 复制代码

const formData = new FormData();
formData.append('name', 'John');
formData.append('age', '30');
formData.append('email', 'john@example.com');

axios.post('https://api.example.com/data', formData)
.then(response => {
  console.log(response.data); // 处理响应数据
})

FormData ：适用于复杂的表单数据，包括文件上传。数据会被序列化为 multipart/form-data 格式。
Content-Type：Axios 会根据数据类型自动设置 Content-Type 头。

自定义请求头

javascript 复制代码

axios.post('https://api.example.com/data', {
  name: 'John',
  age: 30,
  email: 'john@example.com'
}, {
  headers: {
    'Authorization': 'Bearer your-token',
    'Content-Type': 'application/json'
  }
})
.then(response => {
  console.log(response.data); // 处理响应数据
})
.catch(error => {
  console.error('请求失败:', error); // 处理错误
});

headers ：通过 headers 属性可以自定义请求头。在这个示例中，添加了 Authorization 头和 Content-Type 头。
Content-Type：虽然 Axios 会自动设置 Content-Type，但也可以手动覆盖它。