通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。...ajax 引擎帮忙发送) 浏览器端发送请求，只有 XHR 或 fetch 发出的才是 ajax 请求，其他的都不是 ajax 请求 浏览器端接收到响应(一般请求浏览器会自动更新页面，而 ajax...请求需要手动更新) 一般请求：浏览器会直接显示响应体数据，即刷新/跳转页面 ajax 请求：浏览器不会对页面进行任何更新操作，而只是调用监视的回调函数并传入响应相关数据 3....0: 初始 1: open()之后 2: send()之后 3: 请求中 4: 请求完成 onreadystatechange：绑定 readyState 改变的监听 responseType...而 GET 请求不需要，因为 GET 请求不需要修改服务器上的资源 学习链接：尚硅谷_axios 核心技术
一、前言 ---- axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。...比如，有些请求是需要用户登录之后才能访问的，或者post请求的时候，我们需要序列化我们提交的数据。这时候，我们可以在请求被发送之前进行一个拦截，从而进行我们想要的操作。...，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候（即在main.js中），会首先从本地存储中读取token，如果token存在说明用户已经登陆过，则更新...，更新state的network状态 // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏 // 关于断网组件中的刷新重新获取数据...在http.js中介绍了，我们会在断网的时候，来更新vue中network的状态，那么这里我们根据network的状态来判断是否需要加载这个断网组件。断网情况下，加载断网组件，不加载对应页面的组件。
比如，有些请求是需要用户登录之后才能访问的，或者post请求的时候，我们需要序列化我们提交的数据。这时候，我们可以在请求被发送之前进行一个拦截，从而进行我们想要的操作。...axios的封装根据需求的不同而不同。...，更新state的network状态 // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏 // 关于断网组件中的刷新重新获取数据...这点具体在api里会介绍。 3.增加了请求超时，即断网状态的处理。说下思路，当断网时，通过更新vuex中network的状态来控制断网提示组件的显示隐藏。...在http.js中介绍了，我们会在断网的时候，来更新vue中network的状态，那么这里我们根据network的状态来判断是否需要加载这个断网组件。断网情况下，加载断网组件，不加载对应页面的组件。
方法，精简 post 请求方式 封装 Get 方法，精简 get 请求方式 请求成功，配置业务状态码 全局的loading配置 VUE中axios的封装 在vue项目中，和后台交互获取数据这块，我们通常使用的是...比如，有些请求是需要用户登录之后才能访问的，或者post请求的时候，我们需要序列化我们提交的数据。这时候，我们可以在请求被发送之前进行一个拦截，从而进行我们想要的操作。...状态在app.vue中控制着一个全局的断网提示组件的显示隐藏 // 关于断网组件中的刷新重新获取数据，会在断网组件中说明 if (!...这点具体在api里会介绍。 3.增加了请求超时，即断网状态的处理。说下思路，当断网时，通过更新vuex中network的状态来控制断网提示组件的显示隐藏。...在http.js中介绍了，我们会在断网的时候，来更新vue中network的状态，那么这里我们根据network的状态来判断是否需要加载这个断网组件。断网情况下，加载断网组件，不加载对应页面的组件。
依赖于浏览器提供的XMLHttpRequest对象，这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。实现了在页面不刷新的情况下和服务器进行数据交互。...从而实现了页面数据的局部刷新。异步请求使浏览器不用等待服务器处理请求，不用重新加载整个页面来展示服务器响应的数据，在异步请求发送的过程中浏览器还能进行其它的操作。...该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。...通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。 AJAX最大的特点是什么。 Ajax可以实现动态不刷新（局部刷新）就是能在不更新整个页面的前提下维护数据。...通过HTTP Request， 一个web页面可以发送一个请求到web服务器并且接受web服务器返回的信息(不用重新加载页面)，展示给用户的还是通一个页面，用户感觉页面刷新，也看不到到Javascript
通过将状态和逻辑放置在Vuex存储中，您将能够重用状态和逻辑，并只需在Component中编写一些简短的import语句，如下所示： import { mapGetters, mapActions...如果是，则我们正在检查401是否在令牌刷新调用本身上发生（我们不想陷入循环中） 永久刷新令牌！）。然后，代码将刷新令牌并重试失败的请求，并将响应返回给调用方。...如果访问令牌到期，所有请求将失败，并因此触发401拦截器中的令牌刷新。从长远来看，这将刷新每个请求的令牌，这样不太好。...通过保存刷新令牌promise，并向每个刷新令牌请求返回相同的promise，我们可以确保令牌仅刷新一次。 您还需要在设置请求header之后立即在main.js中安装401拦截器。...PS：您可以简单地检查页面加载的到期时间，然后也刷新令牌，但这不适用于用户根本不刷新页面的长期会话。 欢迎访问http://zhaima.tech，阅读更多文章
面试常问一 在浏览器地址栏键入URL,按下回车之后经历的流程: DNS解析(域名解析:域名到IP地址的转换过程):浏览器会根据URL逐层查询DNS服务器缓存解析URL中的域名所对应的IP地址(DNS...服务器对浏览器请求做出响应并把对应带有html文本的HTTP响应报文发送给浏览器 浏览器收到html并在浏览器解析进行渲染页面 浏览器释放TCP连接(四次挥手) (最后一步和倒数第二步可以同时发生,...哪一步在前没有要求) 面试常问二 HTTP常见状态码 (状态码由三位数字构成第一位表示状态码类型) 五种可能的取值类型 1xx：指示信息--表示请求已接收，继续处理 2xx：成功--表示请求已被成功接收...面试常问三 get请求和post请求的区别 从三个层面回答 Http报文层面：GET将请求信息放在URL，POST放在报文体中 数据库层面： GET符合幂等性(幂等性:对数据库的一次操作和多次操作的结果是一致的...可以保存为浏览器书签)，而POST不行 面试常问四 Cookie和Session的区别 HTTP本身是无连接的,正常我们每次请求数据都要重新建立携带数据连接(如登录),但是这样相当麻烦,因此我们引入了某些机制让
，这就为但也应用前端路由“更新视图但不重新请求页面”提供了基础 12.GET和POST的区别 get参数通过url传递，post放在request body中 get请求在url中传递的参数是有长度限制的...，而post没有 post比get更安全，因为get参数都暴漏在url中，所以不能用来传递敏感信息 get请求只能进行url编码，而post支持多种编码方式 get请求会浏览器主动cache，而post...向服务器发送请求，这时可以做其他事情，内容请求到时，用户不用刷新页面，也可以看到新内容 52.Vue.set 方法原理 1.在实例创建之后添加新的属性到实例上（给响应式对象新增属性） 2.直接更改数组下标来修改数组的值...Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。...Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。Vue 在更新 DOM 时是异步执行的。
用户登录之后，会返回一个用户的标识，之后带上这个标识请求别的接口，就能识别出该用户。 标识登录状态的方案有两种： session 和 jwt。...想想你常用的 APP，是不是没再重新登录过？ 而不常用的 APP，再次打开是不是就又要重新登录了？ 这种一般都是双 token 做的。 知道了什么是双 token，以及它解决的问题，我们来实现一下。...这样，我们就基于 axios 的 interceptor 实现了完美的双 token 无感刷新机制。 总结 登录状态的标识有 session 和 jwt 两种方案。...axios.response.interceptor 里，判断返回的如果是 401 就调用刷新接口刷新 token，之后重发请求。...我们还支持了并发请求时，如果 token 过期，会把请求放到队列里，只刷新一次，刷新完批量重发请求。 这样，就是一个基于 Axios 的完美的双 token 无感刷新了。
reject状态的回调函数 // 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了 p.then(function(data...方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了 queryData('http://localhost:3000/data') ....axios put 请求传参 和 post 请求一样 axios.put('http://localhost:3000/axios/123', { uname: 'lisi...() { # 2.1 添加await之后 当前的await 返回结果之后才会执行后面的代码 var info = await axios.get('async1');...if(item.id == this.id) { item.name = this.name; // 完成更新操作之后
useEffect在组件mount时执行，但也会在组件更新时执行。因为我们在每次请求数据之后都会设置本地的状态，所以组件会更新，因此useEffect会再次执行，因此出现了无限循环的情况。... ); } 复制代码 上面的例子中，提交表单的时候，会触发页面刷新；就像通常的做法那样，还需要阻止默认事件，来阻止页面的刷新。...在我们的例子中，data，loading和error状态的初始值与useState创建时一致，但它们已经整合到一个由useReducer创建对象，而不是多个useState创建的状态。...在自定义hooks的末尾，state像以前一样返回，但是因为我们拿到的是一个状态对象，而不是以前那种分离的状态，所以需要将状态对象解构之后再返回。...DOM 变更之后同步调用 effect 可以使用它来读取 DOM 布局并同步触发重渲染 在浏览器执行绘制之前 useLayoutEffect 内部的更新计划将被同步刷新 尽可能使用标准的 useEffect
reject状态的回调函数 // 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了 p.then(function(data...方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了 queryData('http://localhost:3000/data') ....axios put 请求传参 和 post 请求一样 axios.put('http://localhost:3000/axios/123', { uname: 'lisi',...例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易 响应拦截器 响应拦截器的作用是在接收到响应后进行一些操作 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页...if(item.id == this.id) { item.name = this.name; // 完成更新操作之后
文章目录 Axios 前后端交互工具学习 引言 引入Axios 介绍 GET请求的方式 then方法 catch方法 POST请求的方式 PUT 请求的方式 Axios的基本配置 Axios的拦截器 Vue...Axios 前后端交互工具学习 引言 Axios是一个异步请求技术，核心作用就是用来在页面中发送异步请求，并获取对应数据在页面中进行渲染，页面局部更新技术Ajax....就不要写那么长了 还有请求发送超过5s，认为发送请求失败 这些配置在axios创建实例的时候就通过create进行配置，我们之后用instance进行发送axios请求 var instance = axios.create...Axios的拦截器 可以在发送请求之前进行拦截（token身份验证）、也可以在返回响应之后进行拦截（服务器异常统一处理）,官网都有处理的代码以及各种拦截的方式!...,因为axios内部的this指的是axios这个对象，不是vue实例，所以在axios外面，create()内部定义 _this = this，在axios内部使用 _this 代替 this 即可
更为详细更新过程的大家可以去看axios的UPGRADE_GUIDE.md文档。...每一次的表单提交，超链接等，都要刷新整个页面，导致我们的交互体验并不是十分友好。所以，ajax的出现，解决了部分数据刷新的问题，使得数据的获取和局部渲染变得更为便捷。 ...跳过，我们继续来增加需求，现在get请求传参数可以了，我想用post请求并且传递个对象，咋整？这是我们在开发中最常见的场景了。...例如，对于处理社交媒体状态更新，新闻提要或将数据传递到客户端存储机制（如IndexedDB或Web存储）之类的，EventSource无疑是一个有效方案（这段话是抄的）。具体内容可查看MDN。...终于，写完了整个axios的实现，写完了之后发现其实axios的实现源码并不是十分复杂，但是需要一定的了解和熟悉，需要一定的阅读理解能力。
作为一个前端开发工作者，与后台交互是必不可少的，用交互实现异步刷新页面、请求数据、发送数据等等。...','','',function (data) { }) 可以看见，我们跟后台约定好错误代码，我们可以全局处理，错误之后要做什么操作也可以全局处理，包括错误状态也可以全局处理。...}) .then((res) => { }) } //post请求 const post = (url, data) => { return axios.post(url, data...，也可以在响应拦截器里面处理跟后端约定好的各种code。...以上就是想要分享的封装请求，我封装的并不是很好，只是想让大家知道请求最好是自己分装一个适合的。 （完）
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。Vue 在更新 DOM 时是异步执行的。...这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环tick中，Vue 刷新队列并执行实际（已去重的）工作。...)状态码: 根据接口返回的不同status ， 来执行不同的业务，这块需要和后端约定好请求方法：根据get、post等方法进行一个再次封装，使用起来更为方便请求拦截器: 根据请求的请求头设定，来决定哪些请求可以访问响应拦截器...，如根据状态码判断登录状态、授权// 响应拦截器axios.interceptors.response.use(response => { // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据...，你总结的vue最佳实践有哪些从编码风格、性能、安全等方面说几条：编码风格方面：命名组件时使用“多词”风格避免和HTML元素冲突使用“细节化”方式定义属性而不是只有一个属性名属性名声明时使用“驼峰命名”
当需要特殊请求头时，将特殊请求头作为参数传入，覆盖基础配置 }, post:{ 'Content-Type': 'application/json;charset=utf-8'...当需要特殊请求头时，将特殊请求头作为参数传入，覆盖基础配置 } }, // 在向服务器发送请求前，对数据进行处理，axios默认会序列化数据 // transformRequest:[function.../** * 请求失败后的错误统一处理，当然还有更多状态码判断，根据自己业务需求去扩展即可 * @param {Number} status 请求失败的状态码 */ const errorHandle...响应失败后对状态码进行统一处理 在请求拦截中添加token 在响应拦截中对token过期进行相应处理 api抽离 接口域名抽离 抽离API和域名接口 为什么要进行API抽离？..._axios.post(`${base.lk}/login`,params); }, // 测试post接口 postJSON(params){
然而现实狠狠的打了我的脸，因为退出页面的场景不止切换路由~ 退出页面场景： 还在本网站，跳到其他路由 刷新页面/关闭页面也需要发送请求来杀死任务 还在本网站，跳到其他路由 这个比较简单，在 Vue中可以通过路由离开的钩子...无法发送异步请求 我使用的是 axios来发送请求，请求发出去了，但是被取消了，服务器那边根本没有收到请求，如下。...经过一顿分析:发现是 axios请求是异步的问题，谷歌之后发现axios不支持同步的请求 最后使用原生的XMLHttpRequest对象，让请求同步 ~~大功告成！...Beacon API Beacon API用于将少量数据通过post请求发送到服务器。...Beacon是非阻塞请求，不需要响应 完美解决性能缺陷问题： 浏览器将 Beacon 请求排队让它在空闲的时候执行并立即返回控制 它在 unload状态下也可以异步发送，不阻塞页面刷新/跳转等操作。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
