欢迎大家前往腾讯云 + 社区，获取更多腾讯海量技术实践干货哦~
本文由前端林子发表于云 + 社区专栏
随着前端技术的发展，请求服务器数据的方法早已不局限于 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 相应知识