问题:axios、fetch与ajax有什么区别?
主要区别是 axios、fetch请求后都支持Promise对象API,ajax只能用回调函数。
ajax:
Ajax被认为是(Asynchronous JavaScript and XML)的缩写。现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。
依赖的传输对象:XMLHttpRequest
function success(text) { var textarea = document.getElementById('test-response-text'); textarea.value = text; } function fail(code) { var textarea = document.getElementById('test-response-text'); textarea.value = 'Error code: ' + code; } var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象 request.onreadystatechange = function () { // 状态发生变化时,函数被回调 if (request.readyState === 4) { // 成功完成 // 判断响应结果: if (request.status === 200) { // 成功,通过responseText拿到响应的文本: return success(request.responseText); } else { // 失败,根据响应码判断失败原因: return fail(request.status); } } else { // HTTP请求还在继续... } } // 发送请求: request.open('GET', '/api/categories'); request.send(); alert('请求已发送,请等待响应...');
axios:
示例:
axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
Vue2.0之后推荐大家用axios替换JQuery ajax,想必让Axios进入了很多人的目光中。
Axios本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,它有以下几条特性:
- 从 node.js 创建 http 请求
- 支持 Promise API
- 客户端支持防止CSRF
- 提供了一些并发请求的接口(重要,方便了很多的操作)
Axios既提供了并发的封装,也没有fetch的各种问题,而且体积也较小,推荐大家使用。
fetch
示例:
fetch(url).then(res => { console.log(res) }).catch(err => { console.log(err) })
Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。