ajax、fetch和axios的区别

三者都用于发送网络请求

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三者的区别吗？ - 掘金