ajax和axios、fetch的区别

前端是个发展迅速的领域,前端请求自然也发展迅速,从原生的XHR到jquery ajax,再到现在的axios和fetch。下面简单说下三者的用法及其优缺点

1. jquery ajax

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

简单点说,jquery ajax 就是对XHR(XMLHttpRequest)对象的封装。

优点

a. 对原生XHR的封装,做了兼容处理,简化了使用。

b. 增加了对JSONP的支持,可以简单处理部分跨域。

缺点

a. 如果有多个请求,并且有依赖关系的话,容易形成回调地狱。

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

c. ajax是jQuery中的一个方法。如果只是要使用ajax却要引入整个jQuery非常的不合理。

2. axios

Axios是一个基于promise的HTTP库,可以用在浏览器和 node.js 中。它本质也是对原生XMLHttpRequest的封装,只不过它是Promise的实现版本,符合最新的ES规范。

axios({

    method: 'post',

    url: '/user/12345',

    data: {

      firstName: 'liu',

      lastName: 'weiqin'

    }

  })

  .then(res => console.log(res))

  .catch(err => console.log(err))

Vue2.0之后,尤雨溪大大推荐大家使用axios来请求数据。

优点

a. 从浏览器中创建XMLHttpRequests

b. 从 node.js 创建 http 请求

c. 支持 Promise API

d. 拦截请求和响应

e. 转换请求数据和响应数据

f. 取消请求

g. 自动转换 JSON 数据

h. 客户端支持防御 XSRF

缺点

a. 只支持现代浏览器

4. fetch

Fetch API提供了一个 JavaScript 接口,用于访问和操作HTTP管道的部分,例如请求和响应。它还提供了一个全局fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。

fetch是低层次的API,代替XHR,可以轻松处理各种格式,非文本化格式。可以很容易的被其他技术使用,例如Service Workers。但是想要很好的使用fetch,需要做一些封装处理。

fetch('http://example.com/movies.json')

  .then(function(response) {

    return response.json();

  })

  .then(function(myJson) {

    console.log(myJson);

  });

优势:跨域的处理

在配置中,添加mode: 'no-cors'就可以跨域了

fetch('/users.json', {

    method: 'post',

    mode: 'no-cors',

    data: {}

}).then(function() { /* handle response */ });

fetch目前遇到的问题

fetch只对网络请求报错,对400,500都当做成功的请求,需要封装去处理

fetch默认不会带cookie,需要添加配置项。

fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现超时控制并不能阻止请求过程继续在后台运行,造成了流量的浪费。

fetch没有办法原生监测请求的进度,而XHR可以。

请注意,fetch规范与jQuery.ajax()主要有两种方式的不同,牢记:

-. 当接收到一个代表错误的 HTTP 状态码时,从 fetch()返回的 Promise 不会被标记为 reject, 即使该 HTTP 响应的状态码是 404 或 500。相反,它会将 Promise 状态标记为 resolve (但是会将 resolve的返回值的 ok 属性设置为 false ),仅当网络故障时或请求被阻止时,才会标记为 reject。

-. 默认情况下,fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session,则会导致未经认证的请求(要发送 cookies,必须设置 credentials 选项)。

你可能感兴趣的:(ajax和axios、fetch的区别)