Axios 详解

1. Axios 是什么？

Axios 是一个基于 Promise 的 HTTP 客户端，适用于浏览器和 Node.js 环境。它提供了简洁、易用的 API，用于发送 HTTP 请求（如 GET、POST、PUT、DELETE 等），并处理响应数据。

特点：

• 支持浏览器和 Node.js 环境。
• 请求和响应的自动转换（如 JSON）。
• 支持取消请求。
• 拦截请求和响应。
• 防止跨站请求伪造（CSRF）。
• 自动处理请求超时。

  ---

  2. 安装 Axios

  • 浏览器环境：通过  标签引入 CDN。

    html

  • Node.js 环境：通过 npm 安装。

    bash

    npm install axios

    ---

    3. 基本用法

    GET 请求

    const axios = require('axios'); // Node.js 环境
    // 或者直接使用  标签引入后，全局变量 axios 可用
    axios.get('https://api.example.com/data')
    .then(response => {
    console.log(response.data); // 响应数据
    })
    .catch(error => {
    console.error(error); // 错误处理
    });

    POST 请求

    axios.post('https://api.example.com/data', {
    name: 'John',
    age: 30
    })
    .then(response => {
    console.log(response.data);
    })
    .catch(error => {
    console.error(error);
    });

    并发请求

    使用 axios.all 和 axios.spread：

    axios.all([
    axios.get('https://api.example.com/users'),
    axios.get('https://api.example.com/posts')
    ])
    .then(axios.spread((usersResponse, postsResponse) => {
    console.log('Users:', usersResponse.data);
    console.log('Posts:', postsResponse.data);
    }))
    .catch(error => {
    console.error(error);
    });

     

    ---

    4. 配置 Axios

    全局配置

    可以通过 axios.defaults 设置全局默认配置：

    axios.defaults.baseURL = 'https://api.example.com';
    axios.defaults.timeout = 1000; // 超时时间（毫秒）
    axios.defaults.headers.common['Authorization'] = 'Bearer token';

    实例配置

    创建自定义实例，适用于特定场景：

    const instance = axios.create({
    baseURL: 'https://api.example.com',
    timeout: 5000,
    headers: {'X-Custom-Header': 'foobar'}
    });
    instance.get('/data')
    .then(response => console.log(response.data));

    5. 拦截器

    请求拦截器

    在请求发送前对请求进行处理：

    axios.interceptors.request.use(config => {
    console.log('Request sent:', config);
    // 可以在这里添加 token
    config.headers.Authorization = 'Bearer token';
    return config;
    }, error => {
    return Promise.reject(error);
    });

    响应拦截器

    在响应到达前对响应进行处理：

    axios.interceptors.response.use(response => {
    console.log('Response received:', response);
    return response;
    }, error => {
    console.error('Response error:', error);
    return Promise.reject(error);
    });

    ---

    6. 取消请求

    使用 CancelToken

    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
    axios.get('https://api.example.com/data', {
    cancelToken: source.token
    }).catch(thrown => {
    if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
    } else {
    console.error('Error:', thrown);
    }
    });
    // 取消请求
    source.cancel('Operation canceled by the user.');

    ---

    7. 错误处理

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

    • error.message：错误信息。
    • error.response：服务器响应对象（如果存在）。
    • error.request：请求信息（如果请求已发送但未收到响应）。
    • error.config：请求配置。

      示例：

      axios.get('https://api.example.com/data')
      .catch(error => {
      if (error.response) {
      // 服务器响应了，但状态码不在 2xx 范围内
      console.error('Response error:', error.response.status, error.response.data);
      } else if (error.request) {
      // 请求已发送，但未收到响应
      console.error('No response received:', error.request);
      } else {
      // 其他错误
      console.error('Error:', error.message);
      }
      });

      ---

      8. 与 async/await 结合

      Axios 与 async/await 结合使用，代码更简洁：

      async function fetchData() {
      try {
      const response = await axios.get('https://api.example.com/data');
      console.log(response.data);
      } catch (error) {
      console.error(error);
      }
      }
      fetchData();

       

      ---

      9. 与 Fetch 的对比

      特性	Axios	Fetch
      浏览器支持	浏览器和 Node.js	仅浏览器（需 polyfill 支持 Node.js）
      Promise 支持	内置支持	内置支持
      拦截器	支持	不支持
      取消请求	支持	不支持（需第三方库）
      自动转换 JSON	支持	不支持（需手动解析）
      错误处理	更简洁	需手动处理

      ---

      10. 常见场景

      上传文件

      const formData = new FormData();
      formData.append('file', fileInput.files[0]);
      axios.post('https://api.example.com/upload', formData, {
      headers: {
      'Content-Type': 'multipart/form-data'
      }
      }).then(response => {
      console.log('Upload successful:', response.data);
      });

      下载文件

      axios({
      method: 'get',
      url: 'https://api.example.com/download',
      responseType: 'blob' // 必须指定为 blob
      }).then(response => {
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'file.pdf');
      document.body.appendChild(link);
      link.click();
      });

      ---

      总结

      Axios 是一个功能强大且易用的 HTTP 客户端，适用于前端和后端开发。它提供了丰富的功能（如拦截器、取消请求、自动转换 JSON 等），并支持与 async/await 结合使用，代码更简洁。如果你需要一个简单、可靠的 HTTP 客户端，Axios 是一个不错的选择。