ajax、fetch和axios的区别

最新推荐文章于 2025-05-10 23:42:31 发布

「已注销」

最新推荐文章于 2025-05-10 23:42:31 发布

阅读量143

点赞数

分类专栏： JS 文章标签： ajax

原文链接：https://juejin.cn/post/7086325194934976519

版权

JS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了AJAX、Fetch和Axios这三种用于发送网络请求的技术。AJAX允许局部刷新页面，通常使用XMLHttpRequest实现；Fetch是基于Promise的API，提供更友好的模块化设计和数据流处理；Axios是一个基于Promise的HTTP库，支持多种特性如拦截请求和响应、转换数据等。三者各有特点，适用于不同的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三者都用于发送网络请求

AJAX

AJAX是一个技术统称,包括很多技术,并不特指某一技术

特点: 局部刷新页面,无需重载整个页面

XMLHttpRequest只是实现AJAX的一种方式

//用XMLHttpRequest实现ajax

function ajax(url){
    const xhr = new XMLHttpRequest();
    xhr.open(‘GET’,url,false);
    xhr.onreadystatechange = function(){
        //异步处理函数
        if(xhr.readyState === 4){
            if(xhr.statue === 200){
                successFn(xhr.responseText)
            }
        }
        xhr.send(null)
    }
}

//调用上面ajax函数
ajax('这里传一个接口地址')

fetch

Fetch是在ES6出现的,它使用了promise对象,它是XMLHttpRequest实现AJAX的替代品,所以说Fetch是一个API,是一门基于promise的技术,也是实现AJAX的一种新方式

特点:

使用 promise，不使用回调函数。
采用模块化设计，比如 rep、res 等对象分散开来，比较友好。
通过数据流对象处理数据，可以提高网站性能。

//fetch实现ajax,利用 Fetch 发送了一个最简单的 get 请求

function ajax(url){
    fetch(url).then(res=>res.json()).then(data=>{
        console.info(data)
    })
}

//调用
ajax('传一个接口地址')

Axios

Axios 是一个基于 promise 封装的网络请求库，它是基于 XHR 进行二次封装。

特点:

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

//因为它是一个库,我们使用时需要引入再使用

axios({
    method:'post',
    url:'接口地址',
    data:{
        //发送的数据
    }
})

总结

原文链接: 你知道Ajax、Fetch、Axios三者的区别吗？ - 掘金