Ajax、Fetch、Axios的区别

相同点：都是用于发送网络请求
不同点：
Ajax：全称为Asynchronous javaScript And XML,翻译过来就是“异步的javaScript 和 XML”，Ajax其实是一个技术统称，是一个概念模型，它概括了很多技术，并不是指某一技术，它的特征就是让网页实现局部刷新。简单来说，Ajax是一种思想，XMLHttpRequest只是实现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.status === 200){
                   console.info("响应结果",xhr.response)
                 }
             }
          }
         xhr.send(null);
     }
        ajax('http://www.baidu.com')

特点：局部刷新页面，无需重载整个页面
Fetch：在ES6中出现的，它使用了ES6提出的 promise 对象，它是XMLHttpRequest的替代品。Fetch是一个api,是真实存在的，它是基于promise的。

特点：

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

function ajaxFetch(url){
    fetch(url).then(res=>res.json()).then(data =>{  //特点就是使用promise的.then的语法进行链式调用
       console.log(data);
       })
   }
   ajaxFetch('http://www.baidu.com')

Axios：随着vue兴起广泛使用，它是一个封装库，是一个基于promise封装的网络请求库，它是基于XHR二次封装。

特点：

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

//发送post请求
axios({
    method:'post',
    url:'htt://www.baidu.com',
    data:{
        firstName:'ff',
        lastName:'dd'
    }
})

代码007普通

打赏 收藏 海报 链接