Ajax、Fetch、Axios三者的区别

AJax

概念:Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。是一种网络请求的概念框架。

主要特点:实现页面局部刷新,主要使用js的XMLHttpRequest请求实现网络请求。

主要缺点:使用函数回调的方式实现异步请求,若请求里写请求将会导致回调地狱的发生。

示例代码:

javascript 复制代码
<body>
  <script>
    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('https://smallpig.site/api/category/getCategory')
  </script>
</body>

Fetch

概念:使用ES6中提出的promise实现网络请求是Ajax的替代品,是真实存在的请求API。不是对Ajax的封装。

代码:

javascript 复制代码
  <script>
    function ajaxFetch(url) {
      fetch(url).then(res => res.json()).then(data => {
        console.info(data)
      })
    }
    ajaxFetch('https://smallpig.site/api/category/getCategory')
  </script>

主要特点:

  1. 使用promise的方式进行网络请求,支持async / await;
  2. 采用模块化请求,语法简洁更加语义化,例如Request 、 Response,可读性较好;
  3. 脱离XHR,采用新的实现方式。

主要缺点:

  1. 只对网络请求错误进行reject,而对服务器返回的400或者500 都会被当做成功的请求;
  2. 不支持终端和超时处理,造成资源流量的浪费;
  3. 没办法监听请求的进度;
  4. 默认不会带cookie,需要手动添加配置;

Axios

概念:它是一个基于XHR二次进行封装的HTTP请求库;

代码:

javascript 复制代码
// 发送 POST 请求
axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})

主要特点:

  1. 浏览器端发起XMLHTTPRequest请求;
  2. node端发起http请求;
  3. 可进行请求终端;
  4. 可监听请求和返回;
  5. 支持Promise API;
  6. 可中断请求;
  7. 可自动转换json格式
  8. 客户端支持转换XSRF攻击;
  • axios和vue没关系,axios也不是随着Vue的兴起才广泛使用的,axios本身就是独立的请求库,跟用什么框架没关系;而且最初Vue官方推荐的请求库是vue-resouce,后来才推荐的axios;
  • axios不是xhr的子集,axios利用xhr进行了二次封装的请求库,xhr只是axios中的其中一个请求适配器,axios在nodejs端还有个http的请求适配器;axios = xhr + http

注意📢

axios和vue是没关系的,它并不是随着vue的兴起而被广泛使用的,而是axios本身就是一个独立的请求库,跟使用的框架并没有关系;最初vue官方推荐的请求库是vue-resouce,后来才推荐使用axios;axios是利用了xhr进行的二次封装库,xhr只是其中的一个http请求适配器;Axios = XHR + HTTP;

相关推荐
高兴蛋炒饭26 分钟前
RouYi-Vue框架,环境搭建以及使用
前端·javascript·vue.js
m0_748240441 小时前
《通义千问AI落地—中》:前端实现
前端·人工智能·状态模式
ᥬ 小月亮1 小时前
Vue中接入萤石等直播视频(更新中ing)
前端·javascript·vue.js
神雕杨2 小时前
node js 过滤空白行
开发语言·前端·javascript
网络安全-杰克2 小时前
《网络对抗》—— Web基础
前端·网络
m0_748250742 小时前
2020数字中国创新大赛-虎符网络安全赛道丨Web Writeup
前端·安全·web安全
周伯通*2 小时前
策略模式以及优化
java·前端·策略模式
艾斯特_2 小时前
前端代码装饰器的介绍及应用
前端·javascript
Sokachlh2 小时前
【elementplus】中文模式
前端·javascript
轻口味2 小时前
【每日学点鸿蒙知识】hap安装报错、APP转移账号、import本地文件、远程包构建问题、访问前端页面方法
前端·华为·harmonyos