关于axios的详细用法和参数

Axios 详细用法与参数指南

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境。相比 Fetch API，它提供了更简洁的 API、自动 JSON 转换、请求/响应拦截等强大功能。

安装方式

浏览器中使用 (CDN)

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

通过 npm/yarn 安装

npm install axios
# 或
yarn add axios

在项目中引入

// ES6 模块
import axios from 'axios';

// CommonJS
const axios = require('axios');

基本用法

发起 GET 请求

axios.get('/user?ID=12345')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

发起 POST 请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

请求配置参数

Axios 请求可以接受一个配置对象，包含以下常用属性：

参数	类型	描述
url	String	请求的服务器 URL
method	String	请求方法，默认是 get
baseURL	String	自动加在 url 前面，除非 url 是绝对 URL
headers	Object	自定义请求头
params	Object	URL 参数，自动拼接到 URL 上
data	Object/FormData/String	作为请求体发送的数据
timeout	Number	请求超时时间（毫秒），默认 0（不超时）
withCredentials	Boolean	跨域请求时是否需要凭证（cookies）
responseType	String	响应数据类型，可选 json/text/blob 等
maxContentLength	Number	允许的响应内容最大尺寸
validateStatus	Function	自定义 HTTP 状态码的验证逻辑
onUploadProgress	Function	上传进度回调
onDownloadProgress	Function	下载进度回调
cancelToken	CancelToken	指定取消请求的 token

完整配置示例

axios({
  method: 'post',
  url: '/user/12345',
  baseURL: 'https://api.example.com',
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'Authorization': 'Bearer token123'
  },
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  timeout: 1000,
  withCredentials: true,
  responseType: 'json',
  onUploadProgress: progressEvent => {
    const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`上传进度: ${percent}%`);
  }
});

响应结构

Axios 请求返回的响应对象包含以下属性：

属性	类型	描述
data	Any	服务器返回的数据
status	Number	HTTP 状态码
statusText	String	HTTP 状态消息
headers	Object	响应头
config	Object	请求的配置信息
request	XMLHttpRequest	生成此响应的请求对象

响应处理示例

axios.get('/user/12345')
  .then(response => {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

全局配置

可以设置全局默认配置，这些配置会应用到每个请求中：

// 设置基础 URL
axios.defaults.baseURL = 'https://api.example.com';

// 设置请求头
axios.defaults.headers.common['Authorization'] = 'Bearer token123';
axios.defaults.headers.post['Content-Type'] = 'application/json';

// 设置超时时间
axios.defaults.timeout = 2500;

创建实例

可以创建自定义的 Axios 实例，每个实例都有自己的配置：

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

// 使用实例
instance.get('/user/12345')
  .then(response => {
    console.log(response.data);
  });

拦截器

Axios 提供了请求和响应拦截器，可以在请求或响应被处理前拦截它们：

请求拦截器

axios.interceptors.request.use(config => {
  // 在发送请求前做些什么
  config.headers.Authorization = 'Bearer token123';
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

响应拦截器

axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  if (response.status === 200) {
    return response.data;
  }
  return response;
}, error => {
  // 对响应错误做点什么
  if (error.response.status === 401) {
    // 处理未授权错误
  }
  return Promise.reject(error);
});

取消请求

Axios 支持取消请求功能：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(thrown => {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求
source.cancel('Operation canceled by the user.');

并发请求

Axios 提供了处理并发请求的辅助函数：

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread((acct, perms) => {
    // 两个请求都完成后执行
    console.log(acct.data, perms.data);
  }));

错误处理

Axios 的错误对象包含以下属性：

属性	类型	描述
message	String	错误消息
config	Object	请求的配置信息
code	String	错误代码（如 'ECONNABORTED'）
request	XMLHttpRequest	生成此错误的请求对象
response	Object	包含服务器响应的错误对象

错误处理示例

axios.get('/user/12345')
  .catch(error => {
    if (error.response) {
      // 请求已发出，服务器返回状态码不在 2xx 范围
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求已发出但没有收到响应
      console.log(error.request);
    } else {
      // 设置请求时出错
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

文件上传

Axios 可以方便地上传文件：

const formData = new FormData();
const fileInput = document.querySelector('input[type="file"]');

formData.append('file', fileInput.files[0]);
formData.append('user', 'user123');

axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  onUploadProgress: progressEvent => {
    const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`上传进度: ${percent}%`);
  }
}).then(response => {
  console.log('上传成功', response.data);
});

与 Fetch API 的主要区别

特性	Axios	Fetch
浏览器支持	需要 polyfill 支持 IE11	不支持 IE
请求取消	支持	支持 (AbortController)
超时设置	内置支持	需要手动实现
JSON 转换	自动	需要手动调用 .json()
拦截器	支持	不支持
进度监控	支持	部分支持
并发请求	提供辅助方法	需要手动实现
CSRF 防护	内置支持	需要手动实现
错误处理	更全面	基本
请求/响应转换	支持	不支持

最佳实践

1. 创建实例：为不同的 API 端点创建不同的 Axios 实例
2. 设置全局配置：统一设置 baseURL、超时时间等
3. 使用拦截器：统一处理认证、错误等
4. 封装请求：将常用请求封装成函数
5. 错误处理：统一错误处理逻辑

封装示例

// api.js
import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000
});

// 请求拦截器
api.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 响应拦截器
api.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response.status === 401) {
      // 处理未授权
    }
    return Promise.reject(error);
  }
);

export const getUser = id => api.get(`/users/${id}`);
export const createUser = data => api.post('/users', data);
export const updateUser = (id, data) => api.put(`/users/${id}`, data);
export const deleteUser = id => api.delete(`/users/${id}`);

总结

Axios 是一个功能强大、易于使用的 HTTP 客户端，提供了许多 Fetch API 不具备的高级功能。通过合理配置和使用拦截器、实例等功能，可以大大简化前端网络请求的处理逻辑，提高代码的可维护性和可读性。