前端 JS 调用后端 API 的三种常用方法

3. 优缺点

• 优点：原生 API，无依赖；兼容性好，支持老旧浏览器（如 IE6+）。
• 缺点：代码繁琐，需手动处理请求状态、错误和数据解析；不支持 Promise，无法使用 async/await 简化异步代码。

方法二：jQuery Ajax

jQuery 是早期前端开发中常用的 JavaScript 库，它对 XMLHttpRequest 进行了封装，提供了简洁的 Ajax 方法，大幅减少了代码量，让 API 调用更高效。

1. 核心原理

基于 XMLHttpRequest 封装，通过统一的 .ajax() 方法整合请求配置，内置了数据解析、错误处理等逻辑，同时提供 .get()、.post() 等简化方法，降低开发成本。

2. 实现步骤与代码示例

jQuery 调用 ajax 方法：

• 格式：$.ajax({})
• 参数：
  • type：请求方式 GET/POST
  • url：请求地址
  • async：是否异步，默认是 true 表示异步
  • data：发送到服务器的数据
  • dataType：预期服务器返回的数据类型
  • contentType：设置请求头
  • error：请求失败时调用此函数

引入 jQuery 库：

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

完整调用示例：

$.ajax({
    url: 'https://api.example.com/user/add', // 请求 URL
    type: 'POST', // 请求方法（GET/POST/PUT/DELETE 等）
    contentType: 'application/json', // 发送数据的格式
    data: JSON.stringify({ // 发送给后端的数据
        name: '张三',
        age: 25
    }),
    dataType: 'json', // 预期后端返回的数据格式（自动解析）
    success: function(response) { // 请求成功回调
        console.log('添加用户成功：', response);
    },
    error: function(xhr, status, error) { // 请求失败回调
        console.error('添加用户失败：', status, error);
    },
    complete: function() { // 请求完成（无论成功/失败）回调
        console.log('请求结束');
    }
});

简化方法：.get() 与 .post() 适用于简单的 GET/POST 请求，无需复杂配置：

// GET 请求：获取用户列表
$.get('https://api.example.com/user/list', { page: 1, size: 10 }, function(response) {
    console.log('用户列表：', response);
}, 'json').fail(function(error) {
    console.error('获取失败：', error);
});

// POST 请求：添加用户
$.post('https://api.example.com/user/add', { name: '李四', age: 30 }, function(response) {
    console.log('添加成功：', response);
}, 'json').fail(function(error) {
    console.error('添加失败：', error);
});

3. 优缺点

• 优点：代码简洁，封装完善；内置错误处理和数据解析；支持链式调用。
• 缺点：需引入 jQuery 库，增加页面加载体积；现代单页应用（如 Vue、React 项目）中，通常不依赖 jQuery，易造成冗余。

方法三：axios 与 fetch

随着前端技术的发展，Promise 成为异步编程的标准，axios 和 fetch 应运而生。它们基于 Promise，支持 async/await 语法，更符合现代前端开发习惯，是 Vue、React、Angular 等框架项目的首选。

1. axios：功能强大的 Promise 库

axios 是一个基于 Promise 的 HTTP 客户端，支持浏览器和 Node.js 环境，提供了拦截请求 / 响应、取消请求、自动转换 JSON 数据等丰富功能。

使用步骤：首先需安装 axios（npm/yarn）或通过 CDN 引入。

# npm 安装
npm install axios
# 或 CDN 引入
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

基础请求示例：

// 1. 基础 GET 请求（带参数）
axios.get('https://api.example.com/user/list', {
    params: { page: 1, size: 10 } // 自动拼接为 URL 参数
}).then(function(response) {
    console.log('请求成功：', response.data); // response.data 直接是解析后的 JSON
}).catch(function(error) {
    // 统一处理错误（包括网络错误、404、500 等）
    if (error.response) {
        // 有响应但状态码错误
        console.error('响应错误，状态码：', error.response.status);
        console.error('错误数据：', error.response.data);
    } else if (error.request) {
        // 无响应（网络错误）
        console.error('网络错误，无响应：', error.request);
    } else {
        // 请求配置错误
        console.error('请求配置错误：', error.message);
    }
});

// 2. 基础 POST 请求（传 JSON 数据）
axios.post('https://api.example.com/user/add', {
    name: '王五',
    age: 28
}, {
    headers: {
        'Content-Type': 'application/json' // 可选，默认已支持 JSON
    }
}).then(response => {
    console.log('添加成功：', response.data);
}).catch(error => {
    console.error('添加失败：', error);
});

// 3. 结合 async/await（更简洁的异步写法）
async function getUserList() {
    try {
        const response = await axios.get('https://api.example.com/user/list', {
            params: { page: 1, size: 10 }
        });
        console.log('用户列表：', response.data);
        return response.data;
    } catch (error) {
        console.error('获取失败：', error);
        throw error; // 抛出错误供上层处理
    }
}
// 调用函数
getUserList();

// 4. 高级功能：请求拦截器（添加 Token 等）
axios.interceptors.request.use(config => {
    // 给所有请求添加 Token
    const token = localStorage.getItem('token');
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
}, error => {
    return Promise.reject(error);
});

2. fetch 调用 API 接口使用方法

fetch 是 ES6 引入的浏览器原生 API，基于 Promise，无需依赖第三方库，设计更简洁，是现代浏览器的原生选择。但需注意其部分'特殊行为'（如不默认拦截 HTTP 错误状态码）。

// 1. 基础 GET 请求
fetch('https://api.example.com/user/list?page=1&size=10')
    .then(function(response) {
        // 注意：fetch 仅在网络错误时 reject，404、500 等状态码仍会 resolve
        if (!response.ok) {
            // 手动处理 HTTP 错误
            throw new Error(`请求失败，状态码：${response.status}`);
        }
        // 解析响应数据（支持 json()、text()、blob() 等）
        return response.json();
    })
    .then(function(data) {
        console.log('用户列表：', data);
    })
    .catch(function(error) {
        console.error('请求错误：', error.message);
    });

// 2. 基础 POST 请求（传 JSON 数据）
fetch('https://api.example.com/user/add', {
    method: 'POST', // 请求方法
    headers: {
        'Content-Type': 'application/json' // 数据格式
    },
    body: JSON.stringify({ name: '赵六', age: 32 }), // 发送的数据（需转为字符串）
    credentials: 'include' // 跨域时携带 Cookie（可选）
})
.then(response => {
    if (!response.ok) {
        throw new Error(`状态码错误：${response.status}`);
    }
    return response.json();
})
.then(data => {
    console.log('添加成功：', data);
})
.catch(error => {
    console.error('添加失败：', error);
});

// 3. 结合 async/await
async function addUser() {
    try {
        const response = await fetch('https://api.example.com/user/add', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ name: '孙七', age: 26 })
        });
        if (!response.ok) {
            throw new Error(`请求失败：${response.status}`);
        }
        const data = await response.json();
        console.log('添加成功：', data);
        return data;
    } catch (error) {
        console.error('错误：', error);
        throw error;
    }
}
// 调用函数
addUser();

fetch 的特殊注意点：

• 不默认拦截 HTTP 错误：即使状态码为 404、500，fetch 仍会进入 then 回调，需通过 response.ok（true 表示 200-299 状态码）手动判断。
• 不自动携带 Cookie：跨域请求时需添加 credentials: 'include' 配置，同域请求需添加 credentials: 'same-origin'。
• 无内置超时处理：需手动通过 Promise.race() 实现超时控制。

3. axios 与 fetch 的优缺点对比

总结与选择建议

三种前端 JS 调用后端 API 的方法各有优劣，选择时需结合项目场景、浏览器兼容性要求和开发效率：

• 若需兼容老旧浏览器（如 IE6+），或项目无第三方库依赖，XMLHttpRequest 是唯一选择；
• 若项目已引入 jQuery，或需快速实现简单 API 调用，jQuery Ajax 能简化代码；
• 若为现代单页应用（Vue/React/Angular），或需丰富功能（如拦截器、超时控制），axios 是最优解；
• 若项目追求'零依赖'且仅支持现代浏览器，fetch 可作为轻量选择（需处理其特殊行为）。

前端技术不断迭代，但 API 调用的核心逻辑始终是'发送请求 - 处理响应 - 处理错误'。掌握这三种方法，能让你在不同项目中灵活应对前后端交互需求。