![](https://img-blog.csdnimg.cn/20190918140037908.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Ajax/Fetch/Axios/SuperAgent
文章平均质量分 91
Ajax/Fetch API/Axios/SuperAgent
油墨香^_^
想要敲出漂亮的代码, 就要暴露在全世界的眼睛下!
展开
-
前端接口防止重复请求实现方案
到这里,整个的需求总算是完结啦!不用一个个接口的改代码,又可以愉快的打代码了,nice!Demo地址[1]转载 2024-06-03 08:44:28 · 8 阅读 · 0 评论 -
你知道 XHR 和 Fetch 的区别吗?
现如今,网站开发普遍采用前后端分离的模式,数据交互成为了不可或缺的关键环节。在这个过程中,XHR和Fetch API是两种最常见的方法,用于从 Web 服务器获取数据。XHR是一种传统的数据请求方式,而Fetch API则代表了现代 Web 开发的新兴标准。接下来,我们将一同深入学习它们的使用方法和适用场景。转载 2024-05-30 08:51:41 · 17 阅读 · 0 评论 -
axios的二次封装
axios当我们进行二次封装时,切勿为了封装而封装,首先要分析原有框架的缺点,下面我们来分析一下axios目前有什么缺点。转载 2023-03-17 09:46:16 · 4635 阅读 · 0 评论 -
2022年我的面试万字总结(浏览器网络篇)
Post 和 Get 是 HTTP 请求的两种方法,其区别如下:PUT请求是向服务器端发送数据,从而修改数据的内容,但是不会增加数据的种类等,也就是说无论进行多少次PUT操作,其结果并没有不同。(可以理解为时更新数据)POST请求是向服务器端发送数据,该请求会改变数据的种类等资源,它会创建新的内容。(可以理解为是创建数据)1.第一次请求为预检请求,状态码为:204作用:2.第二次为真正的请求常见的 Content-Type 属性值有以下四种:(1):浏览器的原生 form 表单,如果不设置 enctype转载 2023-02-24 10:25:16 · 112 阅读 · 0 评论 -
深入浅出 axios 源码
axios 是目前最常用的 http 请求库,可以用于浏览器和 node.js , 在 github 上已有 43k star 左右之多。转载 2023-03-29 09:26:31 · 76 阅读 · 0 评论 -
一文读懂Axios核心源码思想
Axios 的适配器原理是什么?Axios 是如何实现请求和响应拦截的?Axios 取消请求的实现原理?CSRF 的原理是什么?Axios 是如何防范客户端 CSRF 攻击?请求和响应数据转换是怎么实现的?这里的实际请求是对适配器的封装,请求和响应数据的转换都在这里完成。那么数据转换是如何实现的呢?转载 2023-02-22 09:38:05 · 241 阅读 · 0 评论 -
从 16 个方向逐步搭建基于 vue3 的前端架构
由于vue3.2版本的发布,的实验性标志已经去掉,这说明这个语法提案已经正式开始使用,并且我个人对这个方案表示非常喜欢,其他的更新请自行了解。到目前为止,我认为 vue3 已经完全可以用于生产环境。在此将我的开发体验,总结至此,分享给大家。我认为前端架构核心工作是定制一套适合当前业务需求的解决方案,从而降低需求的增加而带来的技术实现的复杂度。下面我将从 16 个方向,逐渐带领大家搭建一套属于你自己的脚手架,制定一套合理的解决方案,为项目打下良好的基础,与同伴形成合适的开发习惯。转载 2023-02-21 10:49:58 · 152 阅读 · 0 评论 -
如何保证API接口数据安全?
前后端分离的开发方式,我们以接口为标准来进行推动,定义好接口,各自开发自己的功能,最后进行联调整合。无论是开发原生的APP还是webapp还是PC端的软件,只要是前后端分离的模式,就避免不了调用后端提供的接口来进行业务交互。网页或者app,只要抓下包就可以清楚的知道这个请求获取到的数据,也可以伪造请求去获取或攻击服务器;也对爬虫工程师来说是一种福音,要抓你的数据简直轻而易举。那我们怎么去解决这些问题呢?接口签名。转载 2023-01-05 16:07:04 · 881 阅读 · 0 评论 -
如何写一个像 axios 那样优秀的请求库
前端开发中,经常会遇到发送异步请求的场景。一个功能齐全的 HTTP 请求库可以大大降低我们的开发成本,提高开发效率。axios 就是这样一个 HTTP 请求库,近年来非常热门。目前,它在 GitHub 上拥有超过 40,000 的 Star,许多权威人士都推荐使用它。因此,我们有必要了解下 axios 是如何设计,以及如何实现 HTTP 请求库封装的。撰写本文时,axios 当前版本为 0.18.0,我们以该版本为例,来阅读和分析部分核心源代码。axios 的所有源文件都位于lib。...原创 2022-08-15 15:17:32 · 191 阅读 · 0 评论 -
Promise面试实战指北
在某些场景下,我们只希望用一个loading态去管理所有异步请求,当任一存在pending态的请求时,展示全局loading组件,当所有请求都fulfilled或rejected时,隐藏全局loading组件。这个问题的本质在于,同一类请求是有序发出的(根据按钮点击的次序),但是响应顺序却是无法预测的,我们通常只希望渲染最后一次发出请求响应的数据,而其他数据则丢弃。另外,为了减小服务器的压力,我们还会。,其次,如果有并发限制的话用它来做还需要分批请求,实际效率也会比较低,短木板效应很明显。...原创 2022-08-11 10:02:26 · 164 阅读 · 0 评论 -
前端工程师都应该掌握的抓包神器工具
Charles是在PC端常用的网络请求截取工具,无论前端还是后端开发者,都是应该必备的工作提效利器!16.png。原创 2022-08-03 10:00:04 · 326 阅读 · 0 评论 -
封装 axios 拦截器实现用户无感刷新 access_token
最近做项目的时候,涉及到一个单点登录,即是项目的登录页面,用的是公司共用的一个登录页面,在该页面统一处理逻辑。最终实现用户只需登录一次,就可以以登录状态访问公司旗下的所有网站。其中本文讲的是在登录后如何管理和,主要就是封装 axios拦截器,在此记录。前置场景转存失败重新上传取消进入该项目某个页面需要登录,未登录就跳转至SSO登录平台,此时的登录网址 url为,其中是后台那边约定定义好的,是成功授权后指定的回调地址。输入账号密码且正确后,就会重定向回刚开始进入的页面,并在地址栏带一个参数 ,即是,code的转载 2022-07-13 14:42:31 · 445 阅读 · 2 评论 -
九种跨域方式实现原理
前言前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容。本文完整的源代码请猛戳github 博客一、什么是跨域?1.什么是同源策略及其限制内容?同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到 XSS、CSFR 等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个 ip 地址,也非同源。同源策略限制内容有: Cookie、LocalStorage、IndexedDB原创 2022-07-04 09:32:12 · 129 阅读 · 0 评论 -
5 个顶级的 JavaScript Ajax 组件和库
AJAX是用来对服务器进行异步HTTP调用的一系列web开发技术客户端框架。 AJAX即Asynchronous JavaScript and XML(异步JavaScript和XML)。AJAX曾是web开发界的一个常见名称,许多流行的JavaScript小部件都是使用AJAX构建的。例如,有些特定的用户交互(如按下按钮)会异步调用到服务器,服务器会检索数据并将其返回给客户端——所有这些都不需要重新加载网页。AJAX的现代化重新引入JavaScript已经进化了,现在我们使用前端库和/或如Re转载 2022-06-28 09:42:16 · 442 阅读 · 0 评论 -
Ajax 的全面总结
Ajax在前端开发中有着举足轻重的地位,关于Ajax的使用和注意事项一直是一个重要的话题,借此机会,本文希望对Ajax做一个全面的总结,彻底揭开Ajax的神秘面纱。一.什么是AjaxAjax(Asynchronous JavaScript and XML),可以理解为JavaScript执行异步网络请求。通俗的理解的话就是,如果没有Ajax技术,改变网页的一小部分(哪怕是一行文字、一张图片)都需要重新加载一次整个页面,而有了Ajax之后,就可以实现在网页不跳转不刷新的情况下,在网页后台提交数据,部分转载 2022-05-14 21:50:42 · 1794 阅读 · 0 评论 -
ajax 跨域,解决方案
答案:只需要点击标题下面的蓝色字【web前端开发】关注即可。前言从刚接触前端开发起, 跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么,于是现在重新梳理了一下。个人见识有限,如有差错,请多多见谅,欢迎提出issue,另外看到这个标题,请勿喷~题纲关于跨域,有N种类型,本文只专注于 ajax请求跨域(ajax跨域只是属于浏览器"同源策略"中的一部分,其它的还有Cookie跨域iframe跨域,Loc转载 2022-05-17 09:43:53 · 3121 阅读 · 0 评论 -
使用HTML5中postMessage实现Ajax中的POST跨域问题
HTML5中提供了在网页文档之间相互接收与发送信息的功能。使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信。浏览器支持程度:IE8+,firefox4+,chrome8+ opera10+1. 首先,要想接收从其他的窗口发过来的消息,就必须对窗口对象的message事件进行监听,如下代码:window.addEventListener(“message”, function(){},false);2. 其转载 2022-06-24 21:43:06 · 265 阅读 · 0 评论 -
全面分析前端的网络请求方式
一、前端进行网络请求的关注点大多数情况下,在前端发起一个网络请求我们只需关注下面几点: 传入基本参数(url,请求方式) 请求参数、请求参数类型 设置请求头 获取响应的方式 获取响应头、响应状态、响应结果 异常处理 携带cookie设置 跨域请求 二、前端进行网络请求的方式 form表单、ifream、刷新页面 Ajax- 异步网络请求的开山鼻祖 jQuery- 一个时代 fet...转载 2022-05-10 09:21:47 · 1940 阅读 · 0 评论