专栏首页前端迷ajax和fetch、axios的优缺点以及比较

ajax和fetch、axios的优缺点以及比较

前端是个发展迅速的领域,前端请求自然也发展迅速,从原生的XHR到jquery ajax,再到现在的axios和fetch。

jquery ajax

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

它是对原生XHR的封装,还支持JSONP,非常方便;真的是用过的都说好。但是随着react,vue等前端框架的兴起,jquery早已不复当年之勇。很多情况下我们只需要使用ajax,但是却需要引入整个jquery,这非常的不合理,于是便有了fetch的解决方案。

优缺点

  • 本身是针对MVC的编程,不符合现在前端MVVM的浪潮
  • 基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案
  • JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)

fetch

fetch号称是ajax的替代品,它的API是基于Promise设计的,旧版本的浏览器不支持 Promise,需要使用 polyfill es6-promise

举个例子:

// 原生XHR
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText) // 从服务器获取数据
    }
}
xhr.send()
// fetch
fetch(url).then(response = > {
    if (response.ok) {
        response.json()
    }
}).then(data = > console.log(data)).
catch (err = > console.log(err))

看起来好像是方便点,then链就像之前熟悉的callback。

在MDN上,讲到它跟jquery ajax的区别,这也是fetch很奇怪的地方:

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

突然感觉这还不如jquery ajax好用呢?别急,再搭配上async/await将会让我们的异步代码更加优雅:

async function test() {
    let response = await fetch(url);
    let data = await response.json();
    console.log(data)
}

看起来是不是像同步代码一样?简直完美!好吧,其实并不完美,async/await是ES7的API,目前还在试验阶段,还需要我们使用babel进行转译成ES5代码。

还要提一下的是,fetch是比较底层的API,很多情况下都需要我们再次封装。 比如:

// jquery ajax
$.post(url, {name: 'test'})
// fetch
fetch(url, {
    method: 'POST',
    body: Object.keys({name: 'test'}).map((key) => {
        return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
    }).join('&')
})

由于fetch是比较底层的API,所以需要我们手动将参数拼接成'name=test'的格式,而jquery ajax已经封装好了。所以fetch并不是开箱即用的。

另外,fetch还不支持超时控制。

优缺点:

  • 符合关注分离,没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
  • 更好更方便的写法
  • 更加底层,提供的API丰富(request, response)
  • 脱离了XHR,是ES规范里新的实现方式
  • 1)fetchtch只对网络请求报错,对400,500都当做成功的请求,需要封装去处理
  • 2)fetch默认不会带cookie,需要添加配置项
  • 3)fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,造成了量的浪费
  • 4)fetch没有办法原生监测请求的进度,而XHR可以

作者:WebCandy 来源:CSDN 原文:https://blog.csdn.net/twodogya/article/details/80223508 版权声明:本文为博主原创文章,转载请附上博文链接!

axios axios是尤雨溪大神推荐使用的,它也是对原生XHR的封装。它有以下几大特性:

可以在node.js中使用 提供了并发请求的接口 支持Promise API 简单使用

axios({
    method: 'GET',
    url: url,
})
.then(res => {console.log(res)})
.catch(err => {console.log(err)})

写法有很多种,自行查看文档

并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

这是官方的并发案例,好像是挺厉害的样子。不过感觉它的all方法应该是基于Promise.all()的

axios体积比较小,也没有上面fetch的各种问题,我认为是当前最好的请求方式

优缺点:

从 node.js 创建 http 请求 支持 Promise API 客户端支持防止CSRF 提供了一些并发请求的接口(重要,方便了很多的操作)

最后,这都是些基础用法,还没有深入了解,还是要在实战中踩过坑才能运用的更加自如。

为什么要用axios?

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

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

以上内容整理于互联网

本文分享自微信公众号 - 前端迷(love_frontend)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-10-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Ajax,jQuery ajax,axios和fetch介绍、区别以及优缺点

    三年前入职的时候还是一个只会使用Ajax和Jquery Ajax的菜鸟,由于早期Jquery不支持大文件请求的问题,要么拆分文件,要么用XHR~今天总结一篇数据...

    用户1462769
  • 前后端数据交互(六)——ajax 、fetch 和 axios 优缺点及比较

    ajax是最早出现发送后端请求的技术,属于原生 js 。ajax使用源码,请点击《原生 ajax 请求详解》查看。一般使用之前,我们都需要把它们封装使用,就以 ...

    呆呆
  • 只知道ajax?你已经out了

    随着前端技术的发展,请求服务器数据的方法早已不局限于ajax、jQuery的ajax方法。各种js库已如雨后春笋一般,蓬勃发展,本文主要想介绍其中的axios和...

    前端林子
  • ajax和axios、fetch的区别

    传统 Ajax 指的是 XMLHttpRequest(XHR), 最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请...

    smy
  • vue-d2admin-axios异步请求登录,先对比一下Jquery ajax, Axios, Fetch区别

    前端技术真是一个发展飞快的领域,我三年前入职的时候只有原生XHR和Jquery ajax,我们还曾被JQuery 1.9版本版本以下不支持大文件请求这个问题卡了...

    landv
  • 有同学问我:Fetch 和 Ajax 有什么区别?

    自昨天发了《还在死磕 Ajax?那可就 out 了!》一文后,收到了一些大家的一些评论,评论都很走心,也很有深度。

    隐逸王
  • ajax、axios、fetch三者之间

    符合关注分离,没有将输入、输出和用事件来跟踪的状态混杂在一个对象里 更好更方便的写法 更加底层,提供的API丰富(request, response) 脱离了X...

    乐心湖
  • React基础(9)-React中发送Ajax请求以及Mock数据

    把这段商品列表的json代码命名为goodlist.json,放到根目录public的api文件夹内

    itclanCoder
  • React学习(九)-React中发送Ajax请求以及Mock数据

    把这段商品列表的json代码命名为goodlist.json,放到根目录public的api文件夹内

    itclanCoder
  • 【vue学习】axios

    文章出自https://www.jianshu.com/p/d771bbc61dab

    kirin
  • Fetch还是Axios——哪个更适合HTTP请求?

    前端开发最重要的部分之一是通过发出 HTTP 请求与后端进行通信,我们有几种方法可以异步地在 Javascript 中进行 API 调用。

    张张
  • 都9102年了,还需要用到 jQuery 吗?[每日前端夜话0xB4]

    关于 jQuery 这个流行的 JavaScript 库如何死亡的问题一直在不断的被讨论。

    疯狂的技术宅
  • QT和MFC的优缺点比较

    (MFC效率较高,但大量的Windows API和消息机制使得其较难理解,不易用;QT封装较好,易用且跨平台,但效率较低)

    乌龟哥哥
  • 全面分析前端的网络请求方式

    这种交互的的缺陷是显而易见的,任何和服务器的交互都需要刷新页面,用户体验非常差,Ajax的出现解决了这个问题。Ajax全称Asynchronous JavaSc...

    Fundebug
  • 全面分析前端的网络请求方式

    这种交互的的缺陷是显而易见的,任何和服务器的交互都需要刷新页面,用户体验非常差, Ajax的出现解决了这个问题。 Ajax全称 AsynchronousJava...

    ConardLi
  • React Native使用axios进行网络请求

    在前端开发中,能够完成数据请求的方式有很多,如Ajax、jQuery ajax、axios和fetch等。不过,随着技术的发展,现在能够看到的基本上也就axio...

    xiangzhihong
  • 【面试Vue全家桶】vue前端交互模式-es7的​语法结构?async/await

    掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb

    达达前端
  • 为什么越来越少的人用 jQuery?

    最早期的开发,大多都使用jQuery,它给我们带来了很多的便利:快速选取元素,方便操作DOM元素的API,各个浏览器之间完美的兼容性,链式操作,动画、ajax...

    Java帮帮
  • Vue 前后端交互基础

      在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高。这种应用模式比较...

    Demo_Null

扫码关注云+社区

领取腾讯云代金券