ajax缺点和优点(vue解决跨域问题)

来源:国外服务器 在您之前已被浏览:1 次
导读:目前正在解读《ajax缺点和优点(vue解决跨域问题)》的相关信息,《ajax缺点和优点(vue解决跨域问题)》是由用户自行发布的知识型内容!下面请观看由(国外主机 - www.2bp.net)用户发布《ajax缺点和优点(vue解决跨域问题)》的详细说明。
笨笨网美国主机,w ww.2 b p .n e t

一般使用之前,我们都需要把它们封装使用,就以 jQuery 的 ajax 为例。

封装的 ajax 如下:

const $ = {};$.ajax = (obj)=>{ var xhr; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) {} } } if (xhr) { xhr.onreadystatechange = () =>{ if (xhr.readyState === 4) { if (xhr.status === 200) { obj.success(xhr.responseText); //返回值传callback } else { //failcallback obj.error('There was a problem with the request.'); } } else { console.log('still not ready...'); } }; xhr.open(obj.method, obj.url, true); // 设置 Content-Type 为 application/x-www-form-urlencoded // 以表单的形式传递数据 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(util(obj.data));//处理body数据 } //处理数据 const util = (obj)=>{ var str = '' for (key in obj){ str += key +'='+obj[key]+'&' } return str.substring(0,str.length-1) } }

封装完成,开始使用的时候你会发现,body和header处理得有些乱,还有回调地狱的问题,所以我们出现了新的 fetch 请求技术。

1.2、fetch

fetch 首先解决了回调地狱的问题,他返回的结果是一个 Promise 对象,对 Promise 不熟的可点击《Promise详解》。

fetch 使用如下:

fetch(url,options).then(response=>{// handle HTTP response},error=>{// handle network error})

fetch 发送网络请求时,可以传输任意数据格式,非常简便。但是 fetch 的超时、终止取消并不方便,只能通过取消 Promise 来完成,如果有多个 fetch 请求时,更难处理。除此之外,fetch 是比较新的技术,低版本浏览器和IE浏览器支持性不好。了解更多 fetch 请点击《》。

1.3、axios

axios 功能非常强大,包括 取消请求,超时处理,进度处理等等。但它的本质还是 ajax,基于 Promise 进行封装,既解决回调地狱问题,又能很好地支持各个浏览器。

axios使用代码如下:

axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone'}).then(function (response) { console.log(response);}).catch(function (error) { console.log(error);});

更多了解 axios 请点击《》

二、ajax、fetch、axios的优缺点

2.1、ajax 的优缺点:

  • 属 js 原生,基于XHR进行开发,XHR 结构不清晰。
  • 针对 mvc 编程,由于近来vue和React的兴起,不符合mvvm前端开发流程。
  • 单纯使用 ajax 封装,核心是使用 XMLHttpRequest 对象,使用较多并有先后顺序的话,容易产生回调地狱。

2.2、fetch 的优缺点:

  • 属于原生 js,脱离了xhr ,号称可以替代 ajax技术。
  • 基于 Promise 对象设计的,可以解决回调地狱问题。
  • 提供了丰富的 API,使用结构简单。
  • 默认不带cookie,使用时需要设置。
  • 没有办法检测请求的进度,无法取消或超时处理。
  • 返回结果是 Promise 对象,获取结果有多种方法,数据类型有对应的获取方法,封装时需要分别处理,易出错。
  • 浏览器支持性比较差。

2.3、axios的优缺点:

  • 在浏览器中创建XMLHttpRequest请求,在node.js中创建http请求。
  • 解决回调地狱问题。
  • 自动转化为json数据类型。
  • 支持Promise技术,提供并发请求接口。
  • 可以通过网络请求检测进度。
  • 提供超时处理。
  • 浏览器兼容性良好。
  • 有拦截器,可以对请求和响应统一处理。
笨笨网美国主机,w ww.2 b p .n e t
提醒:《ajax缺点和优点(vue解决跨域问题)》最后刷新时间 2025-03-21 11:17:28,本站为公益型个人网站,仅供个人学习和记录信息,不进行任何商业性质的盈利。如果内容、图片资源失效或内容涉及侵权,请反馈至,我们会及时处理。本站只保证内容的可读性,无法保证真实性,《ajax缺点和优点(vue解决跨域问题)》该内容的真实性请自行鉴别。