首页
学习
活动
专区
圈层
工具
发布

vue-d2admin-axios异步请求登录,先对比一下Jquery ajax, Axios, Fetch区别

默认的设置需要遵循下面的数据返回格式约定: { // 和后台约定的状态码 code: 0, // 后台返回请求状态信息 msg: '返回信息', // data 内才是真正的返回数据...: { // 和后台约定的状态码 code: 'unlogin', // 后台返回请求状态信息 msg: '用户没有登录' } 如果针对某个错误指定处理方法,应该在响应拦截器中加入对应的代码...: service.interceptors.response.use( response => { // 成功返回数据,在这里判断和后台约定的状态标识 } ) #http 错误 如果需要针对某个...http 错误指定处理方法,应该在响应拦截器中第二个参数中添加对应的代码。...code 在默认的设置中,如果您的接口没有返回 code 字段,将不会进行状态(非 http 状态,而是和后台约定好的状态类型)判断,直接返回 axios 请求返回的数据。

2.9K20

如何更好的在 react 中使用 axios 的拦截器

你也许会疑问为什么要使用 useRef 来存储写入日志的函数,这是因为写入操作可能是异步的,特别是在 axios 的拦截器中,拦截器会和请求执行的上下文进行绑定,异步的请求可能会把日志写到旧的状态中,我习惯把这种绑定实时状态的结构称作...url,github 将返回给我们 404 await ajax.get("https://reactjs.org/123/123"); } return ( ...在默认页面 DefaultPage 组件中,我们可以进行一次错误的请求,请求会返回给我们 404 的状态码,现在我们需要在 axios 中进行拦截,当请求出现 404 时,跳转到 /404 页面。...状态丢失 这个问题让我踩了一个大坑,例如上面两个例子中,我都对拦截器依赖的功能使用 Ref 进行参考调用,如果直接使用非引用的函数,例如日志记录例子中更新日志的 update 函数,或者路由跳转例子中的...,请求结束时写入 "请求的名字 + end",foo 与 bar 的请求顺序如下: foo 请求开始 bar 请求开始 foo 请求结束 bar 请求结束 针对上面的情况,我们期望的日志结果应该是

3.4K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    ajax和fetch、axios的优缺点以及比较

    优缺点 本身是针对MVC的编程,不符合现在前端MVVM的浪潮 基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案 JQuery整个项目太大,单纯使用ajax却要引入整个JQuery...在MDN上,讲到它跟jquery ajax的区别,这也是fetch很奇怪的地方: 当接收到一个代表错误的 HTTP 状态码时,从 fetch()返回的 Promise 不会被标记为 reject, 即使该...相反,它会将 Promise 状态标记为 resolve (但是会将 resolve 的返回值的 ok 属性设置为 false ), 仅当网络故障时或请求被阻止时,才会标记为 reject。...不过感觉它的all方法应该是基于Promise.all()的 axios体积比较小,也没有上面fetch的各种问题,我认为是当前最好的请求方式 优缺点: 从 node.js 创建 http 请求 支持...为什么要用axios?

    9.9K20

    无内鬼 整点AJAX

    与此不同,AJAX 应用可以仅向服务器发送并取回必须的数据,并在客户端采用 JavaScript 处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少,服务器回应更快了。...,即对服务响应回浏览器的数据根据状态码和 AJAX 对象的状态信息进行不同的处理,在绑定状态改变的处理函数中写对应的逻辑代码即可。...综合以上,在状态改变的处理函数一般针对 readyState == 4 且 status == 200 的情况才处理,再根据后台返回的数据类型决定从 responseText 或者 responseXML...在代码中我们可以通过定时器和请求中断来实现超时处理的效果。...callback:请求成功时回调函数。 type:预期服务器返回的数据类型。

    5.8K50

    关于网络请求的面试题总结

    问题列表 get和post的区别 websocket是否了解 http 2.0对于http 1.x有哪些优点? jq的ajax返回值是什么?...(链接地址:https://www.zhihu.com/question/28586791) 我在这里在概括一下: 初级的答案 因为GET方法请求的参数都是放在请求的url上的,所以它与POST有以下明显的区别...首部压缩:HTTP/2引入了HPACK算法对头部进行压缩,大大减小了数据发送的字节数。 4.jQuery的ajax返回值是什么?...ajax 请求有几种数据格式,如何设置数据格式 如何避免浏览器缓存get请求,以便达到每次get请求都能获取最新的数据 等等…… 5.说一说你知道的HTTP状态码 以前遇到面试者说 HTTP状态码不应该是前端开发关心的事情...关于HTTP状态码应该有下面的基本认识: 1xx :1开头的状态码表示临时的响应 2xx :请求成功 3xx :请求被重定向 4xx :请求错误,表明客户端发送的请求有问题 5xx :服务器错误,表明服务端在处理请求时发生了错误

    1.3K50

    CORS跨域资源共享(一):模拟跨域请求以及结果分析,理解同源策略【享学Spring MVC】

    我有理由相信若你在前端使用过Ajax,你100%遇见过如下图这样的报错: ? 若你看到这样的报错,那么此次你的请求返回数据是失败的(请务必理解这句话)。...但是,但是,但是若你查看调试工具的Network栏,发现这个URL请求的response是有返回值的(并且http状态码是200,表示请求被服务端正常处理了),形如这样: ? ?...对于简单请求请务必杜绝这种case:返回的状态码是200(服务端逻辑正常执行且正常返回了),浏览器不会接收结果,而是回调到error方法去~ 非简单请求 顾名思义,它比简单请求就要复杂些,不是简单请求的...OPTIONS请求返回的状态码是403,所以真实的请求并未发送(network栏只有一个请求~)。...为了更好理解这个响应头的作用,我针对性的做出如下试验: 为了测试,我把Access-Control-Max-Age设为了24小时,以保证缓存“永不过期”(控制变量法) 1、相同URL,不同的请求Method

    5.6K10

    前端必知的ajax

    1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。 url (String) : 请求的HTML页的URL地址。...jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。...这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。示例代码: $.get("....其实应该为客户端请求的类型(JSON,XML,等等) 这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。...(这个我不是很懂) 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址。

    4.2K40

    jQuery Ajax 全解析

    jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。...注:不知道为什么URL写绝对路径在FF下会出错,知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径,所以在FF下你将会出错并不会看到返回结果。...callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。 这是一个简单的 GET 请求功能以取代复杂 .ajax 。...其实应该为客户端请求的类型(JSON,XML,等等) 这是一个简单的 POST 请求功能以取代复杂 .ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 .ajax。...; }); 加载完后请重新点击一下上面的 Load 请求看看有什么不同。 jQuery Ajax 事件 Ajax请求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们的逻辑。

    10.9K10

    Ajax 技术学习 (Java EE 实现) —— 用户账户的验证

    Ajax 技术 一、Ajax 基础 1.1 什么是 Ajax?...(发送请求到服务器并获得返回结果) 解释一下什么是同步,什么是异步?...这个函数中,会检查请求的状态,如果请求的状态完成,并且没有发现服务端出现错误,那么将会从该服务器返回的数据进行处理并通常以某种形式显示输出到页面上 —— JavaScript 学习指南(第二版) 1.2...请求 将回调函数得到的内容,显示到 div 上面 这里我封装了两个函数 checkUserExit() 账户非空验证 doAjax(url); // 原生 ajax 应用 请求) get 请求和 post 请求的代码大体都是相同的,只有两个地方不一样 我们可以直接在 url 上加上我们要传递的参数:doAjax('AjaxCheck?

    2.4K30

    一天梳理React面试高频知识点

    在哪个生命周期中你会发出Ajax请求?为什么?Ajax请求应该写在组件创建期的第五个阶段,即 componentDidMount生命周期方法中。原因如下。在创建期的其他阶段,组件尚未渲染完成。...因此在这些阶段发岀Ajax请求显然不是最好的选择。在组件尚未挂载之前,Ajax请求将无法执行完毕,如果此时发出请求,将意味着在组件挂载之前更新状态(如执行 setState),这通常是不起作用的。...编译版本中 React会忽略 propType 验证以及其他的告警信息,同时还会降低代码库的大小,React 使用了 Uglify 插件来移除生产环境下不必要的注释等信息在 Reducer文件里,对于返回的结果...在 Reducer文件里,对于返回的结果,必须要使用 Object.assign ( )来复制一份新的 state,否则页面不会跟着数据刷新。...如果我们的数据请求在组件挂载之前就完成,并且调用了setState函数将数据添加到组件状态中,对于未挂载的组件则会报错。

    3.7K20

    Django 中使用 ajax 请求的正确姿势

    有了这个基本关系理解,我们再来把两者结合的过程分解到代码中,我每次写在线工具的思路大致如下: 在 html 中写好表单以及调用到 ajax 请求的动作,比如按钮点击 既然要引用 ajax 发请求,那么可以把...,需要关注是 status 参数,这个参数也是我这一次写接口的时候才重视起来的,因为 ajax 就应该去判断接口的返回码,然后根据返回码做出相应的操作。...error 函数表示的是请求失败(返回码不是2xx)需要做的事情,这个函数其实有几个参数,但是我一般只需要用到第一个,因为这个参数可以拿到返回码,我需要通过返回码来做相对于的操作,可以看到我代码里面就是拿到返回码...小结:我对于使用 ajax 函数的理解思路比较简单,第一步是提取表单或者页面的标签中参数,然后处理和判断参数,当参数合法的时候开始执行请求,请求之前可以设置一下 csrfmiddlewaretoken...> 从这里看代码就能理解为什么我要在 js 的函数中让 function 使用参数传入的形式传入 CSRF 参数和 URL 参数了,因为这样可以不用在 js 中写死,当然,js 中也可以使用从 html

    2.5K10

    简述ajax的实现原理_空气净化器的原理

    项目经理找到了我,并且征询我培训的主题,考虑到之前Javascript、CSS等WEB开发技术都已经讲解过了,所以决定针对AJAX这一块做一个比较系统的培训,所以这篇文章实际上是一个培训的材料。...对于这一点来说,我个人是觉得非常奇怪的,因为以微软的资源和它的战略眼光来说,应该不会看不到ajax技术的前景,唯一的解释也许就是因为当时它的主要竞争对手Netscape的消失反而使它变得麻痹和迟钝,毕竟巨人也有打盹的时候...status 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪) status Text 伴随状态码的字符串信息 readyState...对于XmlHttpRequest的两个方法,open和send,其中open方法指定了: a、向服务器提交数据的类型,即post还是get。 b、请求的url地址和传递的参数。...例如,我给你一个url地址,如果采用了ajax技术,也许你在该url地址下面看到的和我在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。

    51020

    解决ajax跨域问题【5种解决方案】「建议收藏」

    大家好,又见面了,我是你们的朋友全栈君。 什么是跨域问题? 跨域问题来源于JavaScript的”同源策略”,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。...也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的,html本身没有跨域问题。...当我们正常地请求一个JSON数据的时候,服务端返回的是一串JSON类型的数据,而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的JavaScript代码。...同时jquery还对非跨域的请求进行了优化,如果这个请求是在同一个域名下那么他就会像正常的 Ajax请求一样工作。)...解决方式5:使用Spring Cloud zuul接口网关 我比较懒… 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

    15.6K20

    HTML5 CSS3

    “优雅降级”观点   “优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。...对于ajax请求传递的参数,如果是get请求方式,参数如果传递中文,在有些浏览器会乱码,不同的浏览器对参数编码的处理方式不同,所以对于get请求的参数需要使用 encodeURIComponent函数对参数进行编码处理...创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息 3. 设置响应HTTP请求状态变化的函数 4. 发送HTTP请求 5. 获取异步调用返回的数据 6....12、ajax请求的时候get 和post方式的区别 get一般用来进行查询操作,url地址有长度限制,请求的参数都暴露在url地址当中,如果传递中文参数,需要自己进行编码操作,安全性较低。...17、ajax请求的时候get 和post方式的区别 get一般用来进行查询操作,url地址有长度限制,请求的参数都暴露在url地址当中,如果传递中文参数,需要自己进行编码操作,安全性较低。

    4.2K40

    jQuery ajax() 方法

    jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。...注:不知道为什么URL写绝对路径在FF下会出错,知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径,所以在FF下你将会出错并不会看到返回结果。...callback (Function) :(可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。 这是一个简单的 GET 请求功能以取代复杂 $.ajax 。...其实应该为客户端请求的类型(JSON,XML,等等) 这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。...(这个我不是很懂) 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址。

    4.4K60

    科普系列——如何解释什么是 AJAX?

    这里又出现了一个新的名词:异步。这个名词在计算机领域可以说是一个很重要的名词了,很多技术都离不开异步二字,比如Nodejs的异步非阻塞I/O模型,当然这就是题外话了。我们应该怎么理解这里的异步呢?...request.responseText 就是服务器返回的内容了(默认是字符串) 设置请求参数 request.open(method,url,async); 请求的三个参数分别是:请求的方法、请求的地址...事实上,这已经不是在AJAX的讨论范围了,但是作为一个拓展知识点,我还是想介绍下状态码这个东西。状态码的作用是服务器返回给客户端的用来描述HTTP请求的状态的。...接下来是Response Headers和Request Headers,这里说实话我觉得没什么好说的,稍微有些重要的就是请求体Content-Type,为什么说他重要呢?我们往下看。 ?...我们知道前端开发中经常会用到AJAX发送异步请求,对于POST类型的请求会附带请求数据。而常用的传参方式有两种,其一是Form Data,另一个就是Request Payload了。

    1.2K21

    Ajax笔记

    2、依靠对象 XMLHttpRequest对象 fetch对象 (兼容性较弱) 二、采用同步的方式通过ajax获取数据(简单版) 1、代码 我在当前html文件下伪造了一个hello.json的文档,作为服务器资源...如果需要采用异步的方式获取ajax数据,就需要绑定load事件,等加载后再执行var data= xhr.responseText,才返回数据 三、采用异步绑定事件的方式获取ajax数据 1、代码 异步绑定数据...3、所有status其余状态码 这篇博客(Ajax关于readyState(状态值)和status(状态码)的研究) 上写status其余状态码比较详细 也可以查阅mdn,我这里只是挑出几个常用的状态码...3.3)304 Not Modified(未改变) 如果客户端发送了一个带条件的 GET 请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个状态码 未改变说明无需再次传输请求的内容...status是请求链接到服务器,服务器响应错误后服务器返回浏览器的状态码。

    1.3K60

    基础 | 透彻掌握Promise的使用,读这篇就够了

    这篇文章的开头,主要跟大家分析一下,为什么会有Promise出现。 在实际的使用当中,有非常多的应用场景我们不能立即知道应该如何继续往下执行。最重要也是最主要的一个场景就是ajax请求。...这样做看上去并没有什么麻烦,但是如果这个时候,我们还需要做另外一个ajax请求,这个新的ajax请求的其中一个参数,得从上一个ajax请求中获取,这个时候我们就不得不如下这样做: 当出现第三个ajax...现在所有的库几乎都将ajax请求利用Promise进行了封装,因此我们在使用jQuery等库中的ajax请求时,都可以利用Promise来让我们的代码更加优雅和简单。...四、Promise.all 当有一个ajax请求,它的参数需要另外2个甚至更多请求都有返回结果之后才能确定,那么这个时候,就需要用到Promise.all来帮助我们应对这个场景。...使用的是最简单的方式定义,应该不会有什么理解上的困难。主要提供了show和hide2个方法,用于展示和隐藏。

    69810
    领券