Ajax,jQuery ajax,axios和fetch的区别

Ajax,jQuery ajax,axios和fetch的区别

Ajax：
       ajax，最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。
Jquery Ajax：
      是jQuery框架中的发送后端请求技术，由于jQuery是基于原始的基础上做的封装，所以，jquery Ajax自然也是对原始ajax的封装
Fetch：
     fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js。Fetch函数就是原生js，没有使用XMLHttpRequest对象。
axios：

     axios不是原生JS的，需要进行安装，它不但可以在客户端使用，而且可以在nodejs端使用。Axios也可以在请求和响应阶段进行拦截。同样也是基于promise对象的。

Ajax

前端程序员常说的Ajax是 Asynchronous JavaScript and XML的缩写，意思是异步网络请求。区别于传统web开发中采用的同步方式。

Ajax带来的最大影响就是页面可以无刷新的请求数据。以往，页面表单提交数据，在用户点击完”submit“按钮后，页面会强制刷新一下，体验十分不友好。

fetch代表着更先进的技术方向，但是目前兼容性不是很好，在项目中使用的时候得慎重。

实现一个Ajax 请求

var request = new XMLHttpRequest() ; //创建XMLHttpRequest()

request.onreadystatcechange = function () {
	if ( request.readyState === 4) {               // 状态发生变化时，函数被回调
		if (request.status === 200) {
			return success(request.responseText);  // 成功，通过responseText拿到响应的文本:
		} else {  //失败，更具响应码判断失败原因：
			return fail(request.status);
		}
	} else {
		//HTTP请求还在继续...
	}
}
request.open('GET', '/api/categories');
request.setRequestHeader("Content-Type", "application/json") //设置请求头
request.send();  //到这一步，请求才正式发出

使用原生的js还是比较繁琐，实际工程中建议使用jQuery之类的库，封装的ajax请求方法非常好用，且解决了浏览器兼容性的问题。

jQuery ajax

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

优缺点

• ​本身是针对MVC的编程,不符合现在前端MVVM的浪潮

• 基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案

• JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）

axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，有以下特点：

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

postData () {
    let params = new URLSearchParams() //用来接收参数
    params.append( 'a', 2);
    params.append( 'b', 1);
    axios( {
      url: 'http://localhost/post',
      method: 'post',
      headers: {
        'Content-Type': "application/x-www-form-urlencoded"
      },
      data: params
    })
      .then( res => console.log( res ))
      .then( error =>  console.log( error ))
  }

优缺点

• 设计简洁，API简单，支持浏览器和node，

• 从 node.js 创建 http 请求

• 支持 Promise API

• 客户端支持防止CSRF

• 提供了一些并发请求的接口（重要，方便了很多的操作）

PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。

fetch

fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

使用fetch获取数据的例子

 //fetch get请求
 getData () {
  fetch('./data/data.josn')
    .then( res => res.json() )          //对数据进行格式化
    .then( data => console.log( data ) ) //格式化后的数据
    .catch( error => console.log( error ))
}
//fetch post请求
 fetch( 'http://localhost/post.php',{
    method: POST,
    headers: new Headers({
      'Content-Type': 'application/x-www-form-urlencoded' //指定提交方式为表单提交
    }),
    body: new URLSearchParams([["a",1],["b",2]]).toString() //携带参数

  })
    .then( res = res.text() )
    .then( data => console.log( data ));
}

• fetch要手动进行一次数据格式化，但是axios是内部进行了数据的格式化
• fetch get 方法请求数据，参数要直接连接在url上
• fetch 格式化数据 有三种 处理方法
  • .json() 格式化 json 类型数据， 将 json类型 string 转换成 json 对象
  • .text() 格式化文本
  • .blob() 格式化二进制数据
• fetch 如果按照官网文档书写post请求，也有坑， 携带数据出现了问题
• fetch post处理
  • 设置请求头
  • 通过 new URLSearchPrams 来携带参数

在使用fetch的时候需要注意：

• 当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
• 默认情况下，fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）。

原文 https://www.toutiao.com/a6658039407179727374/?tt_from=weixin&utm_campaign=client_share&wxshare_count=1×tamp=1552952814&app=news_article&utm_source=weixin&utm_medium=toutiao_ios&group_id=6658039407179727374

https://blog.csdn.net/qq_36803558/article/details/81237753

.