axios前后端分离

### 使用 Axios 进行前后端分离项目的 API 请求和数据交互

在现代 Web 开发中，Axios 是一种流行的 HTTP 客户端库，用于执行 AJAX 调用。相比于传统的原生 Ajax 方法，Axios 提供了一个更简洁的 API 接口来处理前端与后端之间的异步通信[^1]。

#### 创建 Axios 实例并配置默认设置
为了更好地管理和定制请求行为，在应用启动时可以创建一个全局 Axios 实例，并为其设定一些通用选项：

import axios from 'axios';

const instance = axios.create({
    baseURL: 'https://api.example.com/', // 设置基础 URL
    timeout: 5000,                       // 设定超时时长
});

#### 发送 GET 请求获取资源列表
当需要从服务器读取信息时，可以通过 `get` 方法发起查询操作。这里展示如何通过参数传递的方式构建带有查询字符串的 URL 来检索特定条件下的用户资料：

instance.get('/users', {
    params: { 
        page: 1,
        limit: 10
    }
})
.then((response) => {
    const users = response.data;
    console.log(users);
}).catch((error) => {
    console.error('Error fetching data:', error.message);
});

此段代码展示了利用 `params` 对象来进行简单的 GET 参数附加[^3]。

#### 处理 POST 请求提交表单数据
对于涉及修改或新增记录的操作，则应采用 `post` 方式传送 JSON 数据体给服务端。下面的例子说明了怎样把新用户的注册信息发送到远程地址：

const newUser = {
    name: "John Doe",
    email: "john@example.com"
};

instance.post('/register', newUser)
.then((response) => {
    alert(`User created successfully! Your ID is ${response.data.id}`);
}).catch((error) => {
    console.error('Registration failed:', error.response ? error.response.statusText : error.message);
});

#### 添加拦截器增强安全性
考虑到 API 可能面临的各种威胁因素，建议为 Axios 配置响应拦截器以便于实施额外的安全策略，例如身份验证令牌刷新机制或是频繁请求检测等[^4]:

// 响应前拦截器：可以在每次发出请求之前做些预处理工作
instance.interceptors.request.use(config => {
    config.headers['Authorization'] = localStorage.getItem('token');
    return config;
}, error => Promise.reject(error));

// 响应后拦截器：用来捕获来自服务器的所有回复并对错误作出适当反应
instance.interceptors.response.use(
    response => response,
    async function (error) {
        if (error.response.status === 401 && !error.config._retry) {
            await refreshToken(); // 尝试重新获取有效 token...
            error.config._retry = true;
            return instance(error.config); // 重试原始请求
        }
        return Promise.reject(error);
    });

以上介绍了几种常见的场景下使用 Axios 执行网络请求的方法和技术要点。当然实际开发过程中还会有更多复杂的情况等待探索解决！