前后端数据交互:ajax 、fetch 和 axios 优缺点和封装示例

2024-10-21 19:47:56

> AJAX

优点：

广泛支持所有浏览器。

可以在不刷新页面的情况下进行异步通信。

能处理多种格式，如 XML、JSON、HTML 等。

缺点：

语法较为冗长复杂。

在嵌套异步调用中容易陷入回调地狱。

受限于同源策略。

封装示例：

javascript 复制代码

function ajaxRequest(url, method, data, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url, true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            callback(JSON.parse(xhr.responseText));
        }
    };
    xhr.send(JSON.stringify(data));
}

> Fetch API

优点：

现代化，更易读的 Promise 语法。

所有现代浏览器都内置支持。

更容易进行链式调用和错误处理。

缺点：

旧版浏览器不支持，需要 polyfill。

需要额外工作来取消请求。

在某些情况下，灵活性稍逊于 AJAX。

封装示例：

javascript 复制代码

async function fetchRequest(url, method, data) {
    const response = await fetch(url, {
        method: method,
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    });
    return await response.json();
}

> Axios

优点：

使用更简单的语法。

支持旧版浏览器。

自动转换 JSON 数据。

内置请求和响应拦截器。

支持请求取消。

缺点：

需要额外的依赖。

相比于原生 Fetch 库的体积略大。

封装示例：

javascript 复制代码

const axios = require('axios');

async function axiosRequest(url, method, data) {
    const response = await axios({
        url: url,
        method: method,
        headers: {
            'Content-Type': 'application/json'
        },
        data: data
    });
    return response.data;
}

End

简易搭建Linux服务器Lamp环境流程及配置

分享:vue3使用async/await(异步同步化)将axios封装请求api管理