Axios - config 配置

在前端使用 Axios 库进行 HTTP 请求时，config 是一个非常重要的配置对象，它控制了请求的各种行为。config 包含了所有可以影响请求的配置项，如请求方法、URL、请求头、超时时间、响应格式等。

一、config 对象的结构与语法

在使用 Axios 发起请求时，config 对象是一个包含所有请求设置的 JavaScript 对象。config 对象的语法如下：

axios({
  method: 'get', // 请求方法
  url: '/api/data', // 请求的 URL
  baseURL: 'https://example.com', // 基础 URL，会拼接在 url 之前
  headers: { // 请求头配置
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your-token-here'
  },
  params: { // URL 查询参数，用于 GET 请求
    userId: 123
  },
  data: { // 请求体数据，用于 POST、PUT 等请求
    name: 'John',
    age: 30
  },
  timeout: 5000, // 请求超时时间（毫秒）
  responseType: 'json', // 响应数据类型
  withCredentials: true, // 是否携带跨域请求的 Cookie
  auth: { // HTTP 基本认证
    username: 'user',
    password: 'password'
  },
  validateStatus: function (status) { // 自定义验证响应状态码
    return status >= 200 && status < 300; // 默认范围是 200-299
  },
  onUploadProgress: function (progressEvent) { // 文件上传进度回调
    console.log('上传进度:', progressEvent.loaded);
  },
  onDownloadProgress: function (progressEvent) { // 文件下载进度回调
    console.log('下载进度:', progressEvent.loaded);
  }
});

二、config 对象的主要配置项

1. method (请求方法)

• 作用：指定 HTTP 请求的方法。
• 类型：string
• 可选值：'get' | 'post' | 'put' | 'delete' | 'patch' | 'options' | 'head'
• 默认值：'get'
• 示例：

method: 'post'

2. url (请求的 URL)

• 作用：指定请求的相对或绝对 URL。
• 类型：string
• 示例：

url: '/api/users'

3. baseURL (基础 URL)

• 作用：设置基础 URL，它会拼接在 url 之前，适用于多个请求共享相同的基础路径的场景。
• 类型：string
• 示例：

baseURL: 'https://api.example.com'

4. headers (请求头)

• 作用：设置请求的 HTTP 头信息。
• 类型：object
• 常见头信息：
  • Content-Type：指定请求体的格式，如 application/json、application/x-www-form-urlencoded、multipart/form-data。
  • Authorization：用于传递认证信息，如 Bearer Token。
• 示例：

headers: {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer your-token-here'
}

5. params (URL 查询参数)

• 作用：设置 URL 查询参数，适用于 GET 请求，会自动拼接到 URL 之后。
• 类型：object
• 示例：

params: {
  userId: 123,
  status: 'active'
}

生成的请求 URL 如：/api/users?userId=123&status=active

6. data (请求体数据)

• 作用：设置请求体的数据，适用于 POST、PUT 等请求。
• 类型：object
• 示例：

data: {
  name: 'John',
  age: 30
}

7. timeout (请求超时时间)

• 作用：设置请求的超时时间，单位为毫秒。如果请求时间超过该时间，会自动取消请求。
• 类型：number
• 默认值：0（无超时）
• 示例：

timeout: 5000 // 5秒

8. responseType (响应数据类型)

• 作用：指定服务器响应的数据类型。
• 类型：string
• 可选值：'arraybuffer' | 'blob' | 'document' | 'json' | 'text' | 'stream'
• 默认值：'json'
• 示例：

responseType: 'json'

9. withCredentials (跨域请求携带凭据)

• 作用：指示是否跨域请求时携带 Cookie 等凭据。
• 类型：boolean
• 默认值：false
• 示例：

withCredentials: true

10. auth (HTTP 基本认证)

• 作用：在请求头中自动生成 Authorization 头，适用于 HTTP 基本认证。
• 类型：object
• 结构：{ username: string, password: string }
• 示例：

auth: {
  username: 'user',
  password: 'password'
}

生成的请求头内容如：Authorization: Basic dXNlcjpwYXNzd29yZA==

11. validateStatus (自定义状态码验证)

• 作用：自定义请求响应的状态码范围，只有在指定范围内的状态码才会被认为是成功。
• 类型：function
• 默认行为：状态码在 200 到 299 之间的请求被视为成功。
• 示例：

validateStatus: function (status) {
  return status >= 200 && status < 500; // 允许 2xx 和 4xx 的响应状态码
}

12. onUploadProgress (上传进度回调)

• 作用：监控文件上传的进度，适用于大文件上传。
• 类型：function
• 参数：progressEvent，包含上传的进度信息。
• 示例：

onUploadProgress: function (progressEvent) {
  const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
  console.log('上传进度:', percentCompleted + '%');
}

13. onDownloadProgress (下载进度回调)

• 作用：监控文件下载的进度，适用于大文件下载。
• 类型：function
• 参数：progressEvent，包含下载的进度信息。
• 示例：

onDownloadProgress: function (progressEvent) {
  const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
  console.log('下载进度:', percentCompleted + '%');
}

三、动态设置 config 对象的属性

在实际开发中，有时需要动态设置 config 对象中的属性，特别是当属性名是动态生成的或包含特殊字符时。下面是动态设置 config 属性的两种方式：

1. 点语法（.）

• 使用场景：当属性名称是已知的、符合变量命名规范（如字母、数字、下划线且不以数字开头）时，通常使用点语法。

// 使用点语法设置 config 对象的属性
config.method = 'get';
config.url = '/api/data';
config.headers = {
  'Content-Type': 'application/json'
};

2. 方括号语法（[]）

• 使用场景：当属性名称是动态生成的、不符合变量命名规范（如含有特殊字符、空格等）时，使用方括号语法。

// 使用方括号语法动态设置 config 对象的属性
const key = 'responseType';
config[key] = 'json';

// 处理含有特殊字符或空格的属性名
config['Content-Type'] = 'application/json';

四、何时使用 [] 语法？

1. 属性名包含特殊字符或空格

在 JavaScript 中，点语法只能用于符合变量命名规则的属性名。如果属性名包含特殊字符（如 -）或空格，必须使用方括号语法。

// 属性名包含特殊字符（如 -

），必须使用方括号语法
config['Content-Type'] = 'application/json';

2. 属性名是动态生成的

在某些情况下，属性名可能在运行时确定。这时无法使用点语法，只能使用方括号语法。

const dynamicKey = 'timeout';
config[dynamicKey] = 5000;

3. 属性名是数字或其他非标准命名

点语法无法用于以数字开头的属性名或其他非标准命名的属性名，但方括号语法可以。

config['123key'] = 'value'; // 只能使用方括号语法

五、综合配置和动态设置

下面是一个综合使用 Axios config 配置的示例，涵盖了请求方法、请求头、URL 参数、请求体数据、超时时间、跨域设置等多个配置项，以及动态设置属性的方式：

import axios from 'axios';

const config = {
  method: 'post', // 请求方法
  url: '/api/users', // 请求的相对 URL
  baseURL: 'https://example.com', // 基础 URL
  headers: { // 请求头配置
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${localStorage.getItem('token')}`
  },
  params: { // URL 查询参数
    status: 'active'
  },
  data: { // 请求体数据
    name: 'John Doe',
    age: 28
  },
  timeout: 5000, // 5秒超时
  responseType: 'json', // 响应数据类型
  withCredentials: true, // 跨域请求时携带凭据
  validateStatus: function (status) { // 自定义状态码验证
    return status >= 200 && status < 300; // 默认状态码范围
  },
  onUploadProgress: function (progressEvent) { // 上传进度回调
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log('上传进度:', percentCompleted + '%');
  },
  onDownloadProgress: function (progressEvent) { // 下载进度回调
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log('下载进度:', percentCompleted + '%');
  }
};

// 动态设置 config 对象的属性
const headerKey = 'Content-Type';
config.headers[headerKey] = 'application/json'; // 动态设置请求头中的 'Content-Type' 属性

const timeoutKey = 'timeout';
config[timeoutKey] = 10000; // 动态设置超时时间为 10 秒

// 发送请求
axios(config)
  .then(response => console.log('请求成功:', response.data))
  .catch(error => console.error('请求失败:', error));

总结

• Axios config 对象 提供了全面的请求配置选项，涵盖了请求方法、请求 URL、请求头、请求体数据、超时时间、跨域设置等。
• headers、params、data 是最常用的配置项，分别用于配置请求头、URL 查询参数和请求体数据。
• onUploadProgress 和 onDownloadProgress 提供了进度监控的回调，适合大文件的上传和下载场景。
• 动态设置属性：可以使用点语法或方括号语法，方括号语法适用于动态生成、包含特殊字符或不符合变量命名规范的属性名。