axios文档有哪些核心使用方法？

Axios 是一个基于 Promise 的 HTTP 客户端，广泛用于浏览器和 Node.js 环境中，它支持请求和响应拦截、请求取消、自动数据转换等功能，是前端开发中处理 HTTP 请求的常用工具，本文将详细介绍 Axios 的核心功能、使用方法及最佳实践。

Axios 的核心特性

Axios 的设计目标是简化 HTTP 请求，并提供强大的扩展能力，其主要特性包括：

1. Promise 支持：所有请求返回 Promise 对象，便于使用 async/await 或链式调用。
2. 请求/响应拦截：可在请求发送前或响应接收后进行统一处理，例如添加 token 或错误处理。
3. 自动数据转换：默认将请求数据转换为 JSON，并自动解析响应数据。
4. 请求取消：通过 CancelToken 或 AbortController 取消未完成的请求。
5. 跨平台支持：可在浏览器和 Node.js 中运行，支持同源和跨域请求。

基本使用方法

发送请求

Axios 提供了多种请求方法，如 get、post、put、delete 等，以下为常见示例：

// GET 请求
axios.get('/user', { params: { id: 1 } })
  .then(response => console.log(response.data))
  .catch(error => console.error(error));
// POST 请求
axios.post('/user', { name: 'John', age: 30 })
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

配置选项

请求时可通过配置项自定义行为,

axios({
  method: 'post',
  url: '/user',
  data: { name: 'John' },
  timeout: 1000, // 超时时间（毫秒）
  headers: { 'Authorization': 'Bearer token' }
});

并发请求

使用 axios.all 或 Promise.all 处理多个并发请求：

axios.all([
  axios.get('/user/1'),
  axios.get('/user/2')
])
.then(responses => {
  console.log(responses[0].data);
  console.log(responses[1].data);
});

拦截器的使用

拦截器分为请求拦截器和响应拦截器,用于统一处理请求和响应逻辑。

// 请求拦截器
axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer token';
  return config;
}, error => Promise.reject(error));
// 响应拦截器
axios.interceptors.response.use(response => {
  return response.data;
}, error => {
  if (error.response) {
    console.error('Status:', error.response.status);
  }
  return Promise.reject(error);
});

错误处理

Axios 的错误分为网络错误、HTTP 错误（如 404、500）和请求配置错误，可通过 catch 或拦截器统一处理：

axios.get('/user/1')
  .catch(error => {
    if (error.response) {
      // 服务器返回错误状态码
    } else if (error.request) {
      // 请求已发送但无响应
    } else {
      // 请求配置错误
    }
  });

与 Fetch API 的对比

最佳实践

1. 封装请求：根据项目需求封装通用请求方法，简化调用逻辑。
2. 统一错误处理：通过拦截器集中处理错误，避免重复代码。
3. 环境适配：区分开发、测试和生产环境的 API 地址。

相关问答 FAQs

Q1：Axios 如何设置请求超时？
A：通过 timeout 配置项设置超时时间（单位：毫秒），

axios.get('/user', { timeout: 5000 }); // 5 秒超时

Q2：Axios 支持上传文件吗？
A：支持，可通过 FormData 对象实现文件上传：

const formData = new FormData();
formData.append('file', fileInput.files[0]);
axios.post('/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' }
});