Ajax/FetchAPI/Axios区别

一、Ajax
传统 Ajax 指的是 XMLHttpRequest（XHR），最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。
JQuery ajax 是对原生XHR的封装，除此以外还增添了对JSONP的支持。经过多年的更新维护，真的已经是非常的方便了，优点无需多言；如果是硬要举出几个缺点，那可能只有：
1.本身是针对MVC的编程,不符合现在前端MVVM的浪潮
2.基于原生的XHR开发，XHR本身的架构不清晰。
3.JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）
4.不符合关注分离（Separation of Concerns）的原则
5.配置和调用方式非常混乱，而且基于事件的异步模型不友好。
JQuery Ajax

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

二、
fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
fetch的优点：
1.符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
2.更好更方便的写法
坦白说，上面的理由对我来说完全没有什么说服力，因为不管是Jquery还是Axios都已经帮我们把xhr封装的足够好，使用起来也足够方便，为什么我们还要花费大力气去学习fetch？
我认为fetch的优势主要优势就是：

语法简洁，更加语义化
基于标准 Promise 实现，支持 async/await
同构方便，使用 isomorphic-fetch
更加底层，提供的API丰富（request, response）
脱离了XHR，是ES规范里新的实现方式
最近在使用fetch的时候，也遇到了不少的问题：
fetch是一个低层次的API，你可以把它考虑成原生的XHR，所以使用起来并不是那么舒服，需要进行封装。
例如：

1）fetch只对网络请求报错，对400，500都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
2）fetch默认不会带cookie，需要添加配置项： fetch(url, {credentials: 'include'})
3）fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
4）fetch没有办法原生监测请求的进度，而XHR可以

FetchAPI
用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象，其中包括返回的一堆原始字节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如JSON，BLOB或者TEXT等等

  <script type="text/javascript">
    /*
      Fetch API 基本用法
          fetch(url).then()
         第一个参数请求的路径   Fetch会返回Promise   所以我们可以使用then 拿到请求成功的结果 
    */
    fetch('http://localhost:3000/fdata').then(function(data){
      // text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
      //return data.json() 将获取到的结果转为json对象
      return data.text(); 将获取到的结构转为字符串
    }).then(function(data){
      //   在这个then里面我们能拿到最终的数据  
      console.log(data);
    })
  </script>

fetch API 中的 HTTP 请求

fetch(url, options).then(）

HTTP协议，它给我们提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT

默认的是 GET 请求
需要在 options 对象中指定对应的 method method:请求使用的方法

post 和普通请求的时候需要在options 中设置请求头 headers 和 body

<script type="text/javascript">
    /*
          Fetch API 调用接口传递参数
    */
   #1.1 GET参数传递 - 传统URL  通过url  ？ 的形式传参 
    fetch('http://localhost:3000/books?id=123', {
            # get 请求可以省略不写 默认的是GET 
            method: 'get'
        })
        .then(function(data) {
            # 它返回一个Promise实例对象，用于获取后台返回的数据
            return data.text();
        }).then(function(data) {
            # 在这个then里面我们能拿到最终的数据  
            console.log(data)
        });

  #1.2  GET参数传递  restful形式的URL  通过/ 的形式传递参数  即  id = 456 和id后台的配置有关   
    fetch('http://localhost:3000/books/456', {
            # get 请求可以省略不写 默认的是GET 
            method: 'get'
        })
        .then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data)
        });

   #2.1  DELETE请求方式参数传递      删除id  是  id=789
    fetch('http://localhost:3000/books/789', {
            method: 'delete'
        })
        .then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data)
        });

   #3 POST请求传参
    fetch('http://localhost:3000/books', {
            method: 'post',
            # 3.1  传递数据 
            body: 'uname=lisi&pwd=123',
            #  3.2  设置请求头 
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
        .then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data)
        });

   # POST请求传参
    fetch('http://localhost:3000/books', {
            method: 'post',
            body: JSON.stringify({
                uname: '张三',
                pwd: '456'
            }),
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data)
        });

    # PUT请求传参     修改id 是 123 的 
    fetch('http://localhost:3000/books/123', {
            method: 'put',
            body: JSON.stringify({
                uname: '张三',
                pwd: '789'
            }),
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data)
        });
</script>

三、Axios
Vue2.0之后，尤雨溪推荐大家用axios替换JQuery ajax，想必让axios进入了很多人的目光中。
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：

1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了很多的操作）
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。

Ajax/FetchAPI/Axios区别

全站热榜

创作者周榜