Ajax Fetch Axios 对比

Ajax Fetch Axios 的区别

• 相同点

  均适用于网络请求，但是在不同维度

• 不同点

  1. AJAX
     一个技术统称，使用XMLHttpRequest来实现构建更复杂，动态的网页的编程实践。
     ajax允许只更新一个HTML页面的部分DOM，而无须重新加载整个页面，支持异步工作，意味着网页一部分正试图重新加载时，代码可以继续运(相比之下，同步会阻止代码继续运行，直到这部分的网页完成重新加载)

     const client = new XMLHttpRequest();
     // 用于指定HTTP请求的参数，或者初始化XMLHttpRequest实例对象
     client.open('GET', 'demo.example');
     client.setRequestHeader('X-Test', 'one');
     client.setRequestHeader('X-Test', 'two');
     // 监听状态改变，进行相应交互
     client.onReadystatechange = function() {
         // readyState 0: unsent 1: opened 2: received 3:loading 4: done(完成)
         if(this.readyState === 4) {
             if(this.status === 200) {
               console.info('success:', '处理服务返回数据')
             } else {
               console.error(this.statusText)
             }
         }
     }
     // error事件 请求失败
     client.onerror = function(e) {
         console.info(this.statusText)
     }
     // progressEvent请求监听事件
     // HTTP请求发出
     client.onloadstart = function() {}
     // 正在发送和加载数据
     client.onprogress = function() {}
     // 请求终止，用户调用了abort()方法
     client.onabort = function() {}
     // 请求成功完成
     client.onload = function() {}
     // 请求完成，不管成功或失败
     client.onloadend = function() {}
     client。timeout = function() {}
     client.send(null)
     

  

  2. Fetch API
     

     1. 浏览器原生API，用于网络请求，提供对Request和Response对象的通用定义。
        
     2. 与XMLHttpRequest一个级别。
        
     3. Fetch api 语法简洁易用，支持promise。

     fetch('demo.test')
     // fetch接受到的response是一个Stream对象
     // res.json()是一个异步操作，去处所有内容，并将其转为JSON对象
     .then(res => res.json())
     // 获取json数据
     .then(json => console.info(json)) 
     .catch(err => console.info('Request Failed', err))
     // 也可使用async await 形式
     

     1. 使用Promise，不用回调函数，大大简化写法，更简洁。
2. 采用模块化设计，API分散在多个对象上（Response，Request，Headers对象）。
3. 通过数据流（Stream对象）处理数据，可以分块读取有利于提高网站性能表现，减少内存占用，对于请求大文件或者网速慢的场景相当有用。

  3. Axios 第三方库
     

     1. 内部可用Fetch和XMLHttpRequest来实现。
     2. 浏览器中创建XMLHttpRequest。
     3. nodejs中创建http请求。
     4. 支持request和response拦截。
     5. 支持Promise API。
     6. 支持客户端XSRF。
        

注: 实际项目中，axios为首选方式，没有特殊要求并不需要自己造轮子，懂原理，会实现，高效开发。