首页 > 其他分享 >axios、ajax、fetch三者的区别

axios、ajax、fetch三者的区别

时间:2023-11-17 16:24:21浏览次数:26  
标签:原生 axios 网页 请求 ajax API fetch

1.ajax:是指一种创建交互式网页应用的网页开发技术,并且可以做到无需重新加载整个网页的情况下,能够更新部分网页,也叫作局部更新

优缺点:
1)局部更新
2)原生支持,不需要任何插件
3)原生支持,不需要任何插件
4)可能破坏浏览器后退功能
5)嵌套回调,难以处理

2.axios:是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中

特点:
1)从浏览器中创建 XMLHttpRequests
2)从 node.js 创建 http 请求
3)支持 Promise API
4)拦截请求和响应
5)转换请求数据和响应数据
6)取消请求
7)自动转换 JSON 数据
8)客户端支持防御 XSRF

3.fetch:使用了 ES6 中的 promise 对象。Fetch 是基于 promise 设计的。Fetch 函数就是原生 js,没有使用 XMLHttpRequest 对象。

优缺点:
1)更加底层,提供的 API 丰富(request, response)
2)脱离了 XHR,是 ES 规范里新的实现方式
3)fetch 是一个低层次的 API,可以把它考虑成原生的 XHR,所以使用起来并不是那么舒服,需要进行封装
4)fetch 只对网络请求报错,对 400,500 都当做成功的请求,需要封装去处理
5)fetch 默认不会带 cookie,需要添加配置项
6)fetch 不支持 abort,不支持超时控制,使用 setTimeout 及 Promise.reject 的实现的超时控制并不能阻止请求过程继续在后台运行,造成了流量的浪费s
7)fetch 没有办法原生监测请求的进度,而 XHR 可以

标签:原生,axios,网页,请求,ajax,API,fetch
From: https://www.cnblogs.com/wp-leonard/p/17839031.html

相关文章

  • axios请求失败、请求超时重新发送请求
    一、axios重新发送请求基础版(所有的请求错误,不论是请求超时还是接口请求出错都会进行重试)以下是一个完整的文件,看懂了的话axios重试请求也就基本会了,不会的话直接复制到项目里,也可以直接调用使用。创建一个axios实例,并在实例中设置请求超时时间timeout、重试请求次数re......
  • axios请求并发限制
    队列有x个之后执行正文在网上看到这么一道题:首先来实现一个分割数组的函数~constgroup=(list=[],max=0)=>{if(!list.length){returnlist;}letresults=[];for(leti=0,len=list.length;i<len;i+=max){results.push(list.s......
  • token以及axios响应拦截器请求拦截器
    一、token的介绍1.概念访问权限的令牌,本质上是一串字符串2.创建正确登录后,由后端签发并返回3.作用判断是否有登录状态等,控制访问权限注意:前端只能判断有无token,而后端才能判断token的有效性4.使用目标:只有登录状态,才能访问内容页面1.在utils/auth.js中判断有无token令牌字符串,则强......
  • Ajax基本原理
    AJAX(AsynchronousJavaScriptandXML)是一种基于JavaScript和XML技术的前端通信方式,可以在不刷新页面的情况下向服务器发送请求,并接收响应数据,实现了前后端的无感通信。本文将介绍AJAX的原理及实现方式。在传统的Web应用中,前端页面通过表单提交或者超链接的方式向服务器......
  • ajax响应200但一直走error
    做登录功能时发现ajax请求响应正常200也能在预览中国看到响应数据,但是执行的是error$.ajax({type:"post",data:{username:$("#username").val(),password:$("#password").val()},dataType:"json",url:"user/login"......
  • AJAX发送请求到服务器获取信息和状态码到前端浏览器------前端
    AJAX在浏览器当中发送异步请求,请求之间是独立的,谁也不用等谁类似于多线程并发,不会出现页面清空然后展示新的页面的效果实现局部刷新(靠多种技术一起做到的,而不是一个技术叫ajax)它是异步的(类似于多线程)在AJAX的请求以及响应中完全依靠的是XMLHttpRequest对象XMLHttpRequ......
  • isomorphic-fetch库代码示例
    isomorphic-fetch库的爬虫程序。//引入isomorphic-fetch库importfetchfrom'isomorphic-fetch';//设置constproxy=;//定义视频URLconsturl=';//使用fetch获取视频数据fetch(url,{method:'GET',headers:{'Accept':'appl......
  • Fetch库代码示例
    importFetch._importFetch.{FetchException,FetchProxyException,FetchTimeoutException}//创建对象valproxy=newFetchProxy)//创建Fetch对象,并传入对象valfetch=newFetch(proxy)//创建请求对象,并传入视频的URLvalrequest=newFetchRequest("")//进......
  • electron的axios用法
    当在Electron中使用axios库时,你需要在渲染进程的代码中使用它来发起HTTP请求。以下是一个完整的示例,展示了如何在Electron中导入并使用axios库: index.html: ```html<!DOCTYPEhtml><html><head> <title>ElectronAxiosExample</title></head><body> <......
  • 使用 AJAX、PHP 和服务器发送事件从 OpenAI 的 API 流式传输数据
    如何使用服务器发送事件(SSE)将数据从上述API流式传输到使用JavaScript和PHP的浏览器客户端?我已经研究这个问题好几个小时了,但我似乎无法弄清楚出了什么问题。作为参考,我尝试在这里调整解决方案:StreamDATAFromopenaiGPT-3APIusingPHP我的代码的其余部分或多或少与上......