只知道ajax？你已经out了

Steven 发布于2019-04-23 13:10 / 2879人阅读

摘要：所以本文将介绍两个目前常用的获取服务器数据的库和。随着作者尤雨溪发布消息，不再继续维护并推荐大家使用开始，进入了很多人的目光。脱离了，是基于设计。如果要详细了解的应用，推荐阅读教程和规范。

欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~

本文由前端林子发表于云+社区专栏

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

0.引入

ajax（Asynchronous JavaScript and XML--异步JavaScript 和 XML），是一种客户端向服务器请求数据的方式，并且不需要去刷新整个页面；它依赖的是XMLHttpRequest对象。在我之前的文章中，介绍过ajax的创建过程，可以移步这次，我们聊聊ajax的创建过程。

当然项目中我们一般没有直接使用原生的ajax，而是使用javascript的各种库，例如jQuery。jQuery对原生的XHR对象进行了封装，还增添了对JSONP的支持，且经过多年维护，各种文档资料非常丰富，非常适合学习和上手。不过随着前端技术的快速发展，react、vue框架的兴起，XHR对象都有了替代的方案（fetch）。另外如果为了要使用$.ajax方法，就导入整个jQuery这个大而全的库，也未免显得臃肿了些。所以本文将介绍两个目前常用的获取服务器数据的js库：axios和fetch。

1.axios

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

随着 vuejs 作者尤雨溪发布消息，不再继续维护vue-resource,并推荐大家使用 axios 开始，axios 进入了很多人的目光。axios本质也是对原生的XHR的封装，不过它是Promise 的实现版本，符合最新的ES规范，axios的几条特性：

(1)从浏览器中创建XHR；

(2)从node.js创建http请求；

(3)支持Promise API；

(4)客户端支持防御CSRF

(5)提供了一些并发请求的接口

使用npm安装：

 npm install axios

示例--执行GET请求：

//axios
axios.get("/user", {
    params: {
        ID: 12345
    }
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

axios的优点：体积较小、使用简单、还可以执行多个并发请求，并且可以直接得到返回结果，不会像fetch需要自己去转换，个人还是比较喜欢使用axios。

2.fetch

fetch API脱离了XHR，是基于Promise设计。旧浏览器不支持Promise，需要使用polyfill es6-promise。

2.1 使用

使用npm安装：

npm install whatwg-fetch --save

示例--执行GET请求：

//use "whatwg-fetch"
import "whatwg-fetch"

var result = fetch(url, {
    credentials: "include",//跨域请求带上cookie 
    headers: { "Accept": "application/json, text/plain, */*" }//设置http请求的头部信息 
}).then(res => {
    return res.text() //将请求来的数据转化成 文本形式 
    // return res.json() //将数据转换成 json格式
}).then(text => {
    console.log(text)
}).catch(e => {
    throw (e)
})

可以在这个代码的基础上，增加一些操作，比如说在对请求数据处理前，先检查下返回结果的状态。对状态非200的结果，增加对应状态码的错误提示；在得到请求数据后，转换成需要的文本格式，或者json格式；另外，还可以对转换后的数据进行进一步的处理，比如请求的数据返回的是下划线类型的数据，可以处理成驼峰形式。

2.2 fetch的优点及需要注意的地方

为什么要使用fetch呢？直接使用jQuery和axios也能满足我们的开发需要。看了些文章，提及到使用fetch的好处：

脱离的XHR，是ES规范里新的实现方式，支持async/await；
更加底层，提供了丰富的API(request，response)；
符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里；
更好更方便的写法；

需要注意的是：

兼容性；
当服务器返回400、500等错误码时并不会reject，只有网络错误等导致请求不能完成时，fetch才会被reject；
fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制，并不能阻止请求过程继续在后台运行，造成了流量的浪费；
fetch没有办法原生监测请求的进度，而XHR可以；
fetch跨域请求时，默认不会带cookie，如果需要带cookie，则要指定:credentials:’include’，例如：

var result = fetch(url, {
    credentials: "include",
});

3.小结

本文简单地分别介绍了axios和fetch的使用方法和特点。如果要详细了解fetch的应用，推荐阅读 MDN Fetch 教程和WHATWG Fetch 规范。如有问题，欢迎指正。

相关阅读
【每日课程推荐】机器学习实战！快速入门在线广告业务及CTR相应知识

此文已由作者授权腾讯云+社区发布，更多原文请点击

搜索关注公众号「云加社区」，第一时间获取技术干货，关注后回复1024 送你一份技术课程大礼包！

海量技术实践经验，尽在云加社区！

云服务器 GPU云服务器百度一下你就知道了你知道你已经只知道

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1524.html

Vue动态加载异步组件

摘要：目前采用动态加载异步组件的方式来实现小组件之间的通信。内容使用过的都应该知道的动态加载组件通过来绑定需要加载的组件。总结本篇主要借助的动态组件和打包单文件来实现动态加载异步组件，通过的事件总线挂载在上来实现平级组件之间的通信。背景：目前我们项目都是按组件划分的，然后各个组件之间封装成产品。目前都是采用iframe直接嵌套页面。项目中我们还是会碰到一些通用的组件跟业务之间有通信，这种...

awesome23 2019-08-26 13:22 评论0 收藏0
设计无限滚动下拉加载，实践高性能页面真谛

摘要：论坛上有过这么一篇热门文章，它从角度分析了无限滚动加载的设计实践。无限滚动加载背后的技术挑战其实比想象中要多不少。整体思路和方案设计我们要实现的页面样例如图，它能够做到无限下拉加载内容。 UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices，它从UX角度分析了无限滚动加载的设计实践。无限滚动加载在互联网上到处都有应用：豆瓣...

Hanks10100 2019-08-20 14:39 评论0 收藏0
设计无限滚动下拉加载，实践高性能页面真谛

摘要：论坛上有过这么一篇热门文章，它从角度分析了无限滚动加载的设计实践。无限滚动加载背后的技术挑战其实比想象中要多不少。整体思路和方案设计我们要实现的页面样例如图，它能够做到无限下拉加载内容。 UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices，它从UX角度分析了无限滚动加载的设计实践。无限滚动加载在互联网上到处都有应用：豆瓣...

novo 2019-08-01 16:25 评论0 收藏0
关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest

摘要：状态表示对象的状态状态描述未初始化。表示成功，表示未找到，表示服务器内部错误等。前提是浏览器必须支持这个功能，而且服务器端必须同意这种跨域。事件传输成功完成。系列文章关于前端上传文件全面基础扫盲贴(零)关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest关于前端上传文件全面基础扫盲贴(二) ----- File关于前端上传文件全面基础扫盲贴(三) ----...

i_garfileo 2019-08-26 10:29 评论0 收藏0