vlambda博客
学习文章列表

JS基础知识总结(六):只知道ajax?你已经out了


“ 关注 前端开发社区 ,回复"1"即可加入 前端技术交流群,回复 "2"即可免费领取 500G前端干货!

作者:前端林子 https://cloud.tencent.com/developer/article/1380512

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

引入

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

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

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);
  • 符合关注分离,没有将输入、输出和用事件来跟踪的状态混杂在一个对象里;
  • 更好更方便的写法;

需要注意的是:兼容性;

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

例如:

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

3.小结

本文简单地分别介绍了axiosfetch的使用方法和特点。如有问题,欢迎指正。

最近几天会陆续更新的~~,觉得总结的可以的话,麻烦给小编点一个  在看, 谢谢!

往期:


请各位帅哥美女多多支持帅编,回复“1”即可加入前端技术交流群,回复"2"即可领取 500G 前端干货