告别繁琐请求，Axios 助你轻松玩转 HTTP 请求一、什么是 Axios？ Axios 是一个基于 Promise

一、什么是 Axios？

Axios 是一个基于 Promise 的 HTTP 库，用于浏览器和 Node.js 中发送 HTTP 请求。它简洁易用，支持并发请求、请求和响应拦截、取消请求等功能，特别适合现代 JavaScript 应用开发。

二、如何安装 Axios？

在项目中使用 Axios 前，首先需要进行安装。

1. 在 Node.js 项目中安装

如果你使用的是 Node.js 环境（例如，开发一个后端应用或使用 Node.js 与浏览器进行交互），可以通过 npm 安装 Axios：

npm install axios

2. 在前端项目中安装

对于前端项目，如果你使用的是 Webpack、Vite 等构建工具，也可以通过 npm 安装：

npm install axios

如果是通过 CDN 引入，也可以直接在 HTML 文件中加入以下代码：

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

三、基本用法

1. 发送 GET 请求

GET 请求常用于获取服务器上的数据。Axios 提供了简洁的 API 来发起 GET 请求：

import axios from 'axios';

// 发送 GET 请求
axios
    .get('http://www.baidu.com')
    .then((response) => {
        console.log('Response Data:', response.data); // 打印返回的数据
    })
    .catch((error) => {
        console.error('Error:', error); // 错误处理
    });

2. 发送 POST 请求

axios.post(url, data) 方法用于发起 POST 请求，data 参数是你要提交的内容。
数据会以 JSON 格式自动发送给服务器。 POST 请求通常用于提交表单数据或 JSON 数据。在 Axios 中，POST 请求的发送非常简单：

axios
    .post('https://jsonplaceholder.typicode.com/posts', {
        title: 'foo',
        body: 'bar',
        userId: 1,
    })
    .then((response) => {
        console.log('Post Created:', response.data); // 打印返回的数据
    })
    .catch((error) => {
        console.error('Error:', error); // 错误处理
    });

3. 发送带参数的请求

params 用来设置查询参数，会自动将参数拼接到 URL 后面。你可以通过查询参数发送请求，例如 GET 请求中的 URL 参数,实际请求为https://jsonplaceholder.typicode.com/posts?userId=1:

axios
    .get('https://jsonplaceholder.typicode.com/posts', {
        params: {
            userId: 1,
        },
    })
    .then((response) => {
        console.log('Posts for User 1:', response.data); // 打印返回的数据
    })
    .catch((error) => {
        console.error('Error:', error);
    });

四、处理请求中的常见问题

1. 设置请求头（Headers）

有时我们需要在请求中设置一些自定义的请求头，比如身份认证令牌、Content-Type 等。Axios 允许我们在请求中轻松设置这些头信息：

const headers = {
    'User-Agent':
        'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36',
    'sec-ch-ua': '"Google Chrome";v="131", "Chromium";v="131", "Not_A Brand";v="24"',
    'sec-ch-ua-mobile': '?0',
    'sec-ch-ua-platform': '"Windows"'
};

axios
    .get('http://www.baidu.com', { headers })
    .then((response) => {
        console.log('Data with :', response.data);
    })
    .catch((error) => {
        console.error('Error:', error);
    });

2. 处理请求超时

通过 timeout 设置请求的最大等待时间（单位：毫秒）。超过指定时间后，请求会自动被取消。

在发送请求时，可能会遇到请求超时的情况。可以通过设置 timeout 参数来指定请求的超时时间：

axios
    .get('https://jsonplaceholder.typicode.com/posts', { timeout: 5000 })
    .then((response) => {
        console.log('Response:', response.data);
    })
    .catch((error) => {
        if (error.code === 'ECONNABORTED') {
            console.error('Request timeout');
        } else {
            console.error('Error:', error);
        }
    });

3. 处理请求和响应拦截器

request 拦截器可以在请求发送前修改请求配置。
response 拦截器可以在接收到响应时修改响应数据。

Axios 支持请求和响应的拦截器，可以在请求发送之前、响应返回之前做一些操作，比如添加 token、格式化数据等：

请求拦截器

axios.interceptors.request.use(
    (config) => {
        // 在请求发送之前做一些处理
        console.log('Request before config:', 2222);
        config.headers['User-Agent'] = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36';
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);

响应拦截器

axios.interceptors.response.use(
    (response) => {
        // 对响应数据进行处理
        console.log('Response interceptors:', 1111);
        return response.data; // 只返回响应体部分
    },
    (error) => {
        return Promise.reject(error);
    }
);

五、总结

Axios 是一个功能强大且易于使用的 HTTP 客户端，广泛应用于 Web 开发中。无论是简单的 GET/POST 请求，还是更复杂的请求配置（如请求头、拦截器、取消请求等），Axios 都能帮助你轻松应对。如果你还没有尝试过，赶快在你的项目中引入 Axios，提升开发效率吧！