网络请求库 – axios库

Axios库全面解析

一、Axios核心特性

1. 跨平台兼容性

• 浏览器环境 ：通过XMLHttpRequest发送请求
• Node.js环境 ：通过http模块发送请求
• 代码复用：前后端请求逻辑可共享

2. Promise API支持

// 链式调用
axios.get('/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

// async/await语法
async function fetchData() {
  try {
    const response = await axios.post('/user', { name: '张三' });
    console.log(response.data);
  } catch (error) {
    console.error('请求失败:', error);
  }
}

3. 自动数据转换

• 请求数据：JavaScript对象自动序列化为JSON字符串
• 响应数据 ：自动解析JSON响应，直接获取response.data

4. 拦截器机制

// 请求拦截器：添加认证头
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

// 响应拦截器：统一错误处理
axios.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response.status === 401) {
      console.error('未授权，请登录！');
    }
    return Promise.reject(error);
  }
);

5. 安全性增强

• 防御XSRF：默认携带Cookie中的令牌验证请求合法性
• 跨域请求 ：通过withCredentials配置携带凭证

二、安装与基础使用

1. 安装方式

# npm
npm install axios

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

2. 基本请求示例

// 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))
  .catch(error => console.error(error));

三、高级特性

1. 请求配置

axios({
  method: 'post',
  url: '/user',
  data: { name: '张三' },
  timeout: 5000, // 超时设置（毫秒）
  headers: { 'Content-Type': 'application/json' },
  params: { id: 1 } // URL参数
});

2. 创建实例

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

// 使用实例发送请求
instance.get('/users')
  .then(response => console.log(response.data));

3. 并发请求

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);
    console.log('权限信息:', perms.data);
  }));

4. 取消请求

const controller = new AbortController();

axios.get('/user/12345', {
  signal: controller.signal
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('请求已取消:', error.message);
  }
});

// 取消请求
controller.abort('用户取消请求');

四、拦截器与错误处理

1. 请求拦截器场景

• 添加认证头：从本地存储获取Token并附加到请求头
• 防止缓存：为GET请求添加时间戳参数

instance.interceptors.request.use(config => {
  if (config.method === 'get') {
    config.params = { ...config.params, _t: Date.now() };
  }
  return config;
});

2. 响应拦截器场景

• 统一数据格式处理 ：假设后端返回{ code: 0, data: {...}, message: '' }

instance.interceptors.response.use(
  response => {
    const { data } = response;
    if (data.code === 0) {
      return data.data; // 直接返回业务数据
    } else {
      return Promise.reject({ code: data.code, message: data.message });
    }
  },
  error => {
    if (error.response) {
      // 服务器返回错误状态码
      switch (error.response.status) {
        case 401: console.error('未授权'); break;
        case 403: console.error('权限不足'); break;
        case 404: console.error('资源未找到'); break;
        case 500: console.error('服务器内部错误'); break;
      }
    } else if (error.request) {
      // 网络错误或无响应
      console.error('网络请求失败');
    } else {
      // 请求配置错误
      console.error('请求配置错误:', error.message);
    }
    return Promise.reject(error);
  }
);

五、与Fetch API的对比

特性	Axios	Fetch API
数据发送	使用data属性	通过body属性
响应处理	自动解析JSON，直接获取response.data	需手动调用response.json()
错误处理	错误对象包含response属性	需检查error.response是否存在
拦截器	内置拦截器机制	需通过第三方库或自定义封装实现
超时设置	支持timeout配置	需通过AbortController实现
浏览器兼容性	兼容所有浏览器	IE11及以上（需polyfill）

六、最佳实践

1. 封装Axios实例

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

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: { 'Content-Type': 'application/json' }
});

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

// 响应拦截器
instance.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response.status === 401) {
      localStorage.removeItem('token');
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

export default instance;

2. 在Vue/React中使用

// Vue组件示例
import axiosInstance from '@/api/axios';

export default {
  methods: {
    async fetchData() {
      try {
        const data = await axiosInstance.get('/users');
        console.log(data);
      } catch (error) {
        console.error('数据获取失败:', error);
      }
    }
  }
}

3. 统一错误处理策略

• 全局错误处理：在响应拦截器中集中处理4xx/5xx错误
• 组件级错误提示：结合UI库（如Element UI的Message组件）展示用户友好提示

// 响应拦截器
instance.interceptors.response.use(
  response => response.data,
  error => {
    const message = error.response?.data?.message || '请求失败';
    ElMessage.error(message); // Element UI消息提示
    return Promise.reject(error);
  }
);

七、总结

Axios凭借其简洁的API设计、跨平台兼容性和强大的拦截器机制，已成为前端开发中处理HTTP请求的首选工具。通过合理封装和配置，可显著提升代码的可维护性和开发效率。在实际项目中，建议结合现代前端框架（如Vue、React）和状态管理库，进一步优化网络请求的处理流程。