取消请求 axios 是一个 HTTP 请求库，本质是对原生 XMLHttpRequest 的封装 后基于 promise 的实现版本，因此 axios 请求也可以被取消。...回到 promise cancel，可以看到，虽然 API 命名为 cancel，但实际上没有任何 cancel 的动作，promise 的状态还是会正常流转，只是回调不再执行，被“忽略”了，所以看起来像被...在每次发送新请求前，cancel 掉上一次的请求，忽略它的回调。...具体思路是： 利用全局变量记录最新一次的请求 id 在发请求前，生成唯一 id 标识该次请求 在请求回调中，判断 id 是否是最新的 id，如果不是，则忽略该请求的回调 伪代码如下： let fetchId...= id; await 请求 // 判断是最新的请求 id 再处理回调 if (id === fetchId) { // 请求处理 } } 上面的使用方法也会在项目中产生很多模板代码
，即添加请求参数 6：data //放在请求体中传递给后端，当需要请求参数是JSON格式时，需要使用这个 7：timeout // 超时请求时间，单位是ms 超过请求时间，请求就会被取消...批量发送多个请求 axios 常用语法 axios(config): 通用/最本质的发任意类型请求的方式 axios(url[, config]): 可以只指定 url 发 get 请求 axios.request...对象 axios.isCancel(): 是否是一个取消请求的错误 axios.all(promises): 用于批量执行多个异步请求 axios.spread(): 用来指定接收所有成功数据的回调函数的方法.../ajax 请求/请求的回调函数的调用顺序 1....基本流程 配置 cancelToken 对象 缓存用于取消请求的 cancel 函数 在后面特定时机调用 cancel 函数取消请求 在错误回调中判断如果 error 是 cancel, 做相应处理
Promise 构造函数接受一个回调，带有两个参数resolve和reject。 Resolve：是在异步操作完成时应调用的回调。 Reject：是发生错误时要调用的回调函数。...承诺不仅仅是回调，但它们确实对.then和.catch方法使用了异步回调。 Promise 是回调之上的抽象，我们可以链接多个异步操作并更优雅地处理错误。来看看它的实际效果。...Settled：这是 promise 的最终状态。promise 已经死亡了，没有别的办法可以解决或拒绝了。 .finally方法被调用。 ?...如果没有出错，则永远不会调用catch方法。 假设我们有以下承诺:1秒后解析或拒绝并打印出它们的字母。...当然，这种过早的捕获错误是不太好的，因为容易在调试过程中忽略一些潜在的问题。 Promise finally finally方法只在 Promise 状态是 settled 时才会调用。
Promise 构造函数接受一个回调，带有两个参数resolve和reject。 Resolve：是在异步操作完成时应调用的回调。 Reject：是发生错误时要调用的回调函数。...承诺不仅仅是回调，但它们确实对.then和.catch方法使用了异步回调。Promise 是回调之上的抽象，我们可以链接多个异步操作并更优雅地处理错误。来看看它的实际效果。...Settled：这是 promise 的最终状态。promise 已经死亡了，没有别的办法可以解决或拒绝了。.finally方法被调用。 ?...如果没有出错，则永远不会调用catch方法。 假设我们有以下承诺:1秒后解析或拒绝并打印出它们的字母。...当然，这种过早的捕获错误是不太好的，因为容易在调试过程中忽略一些潜在的问题。 Promise finally finally方法只在 Promise 状态是 settled 时才会调用。
import axios from 'axios' axios.get(); 如果要全局使用axios就需要在main.js中设置成全局的，然后再组件中通过this调用 Vue.prototype....$axios.get(); 使用 发送一个最简单的请求 这里我们发送一个带参数的get请求，params参数放在get方法的第二个参数中，如果没有参数get方法里可以只写路径。...，可以一次性发送多个请求，如果全部请求成功，在axios.spread方法接收一个回调函数，该函数的参数就是每个请求返回的结果。...，两个参数分别代表返回的结果 })) axios的API 以上通过axios直接调用发放来发起对应的请求其实是axios为了方便起见给不同的请求提供的别名方法。...第一个参数是成功回调，第二个是错误回调。
首页 专栏 javascript 文章详情 11 记得有一次面试被虐的题，Promise 完整指南 ?...Promise 构造函数接受一个回调，带有两个参数resolve和reject。 Resolve：是在异步操作完成时应调用的回调。 Reject：是发生错误时要调用的回调函数。...承诺不仅仅是回调，但它们确实对.then和.catch方法使用了异步回调。 Promise 是回调之上的抽象，我们可以链接多个异步操作并更优雅地处理错误。来看看它的实际效果。...如果没有出错，则永远不会调用catch方法。 假设我们有以下承诺:1秒后解析或拒绝并打印出它们的字母。...当然，这种过早的捕获错误是不太好的，因为容易在调试过程中忽略一些潜在的问题。 Promise finally finally方法只在 Promise 状态是 settled 时才会调用。
使用了这类API，其传入的函数、数据等等都会被缓存。被缓存的内容其依赖的props、state等值就像上面的例子一样都是“不变”的。...当我们函数本身只在需要的时候才改变。 在上面的例子中，我们无论点击多少次点击按钮，num的值始终为1。这是因为useCallback中的函数被缓存了，其依赖数组为空数组，传入其中的函数会被一直缓存。...每次调用fetchData函数会更新list，list更新后fetchData函数就会被更新。fetchData更新后useEffect会被调用，useEffect中又调用了fetchData函数。...fetchData被调用导致list更新......并且，使用 useReducer 还能给那些会触发深更新的组件做性能优化，因为你可以向子组件传递 dispatch 而不是回调函数。
发送请求 axios.get(url[,config])：发送GET请求 axios.post(url,data)：发送POST请求 axios.put(url,data[,config])：发送PUT...[,config])：发送PATCH请求 axios.head(url[,config])：发送HEAD请求 axios.request(config)：发送各种请求 Promise Promise对象中提供了两个方法...then 和 catch： then：请求执行成功时调用 catch：请求失败时调用// 执行请求返回 Promise 对象 var ajax = axios.get('https://api.myjson.com...console.log(error.config); }) axios配置 配置项 说明 url 请求地址 method 请求方法，默认是 default baseURL 请求时的基地址 headers...指明服务器返回数据的类型，默认是JSON onUploadProgress 上传文件时处理上传进程的回调函数 onDownloadProgress 下载时处理下载进度的回调函数 拦截器 在发送 AJAX
---- 单元测试 单元测试其实在我的实际开发中并没有用到过，但却经常听说，接下来进行单元测试的学习 Jest 和 Vue Test Utils 的基础和进阶全覆盖 TDD，测试驱动开发，一种全新的开发方式...vscode 并且安装了 jest 插件，那么可以实时并且直观的看到测试是否通过 Jest 实现异步测试 回调方式 // callback const fetchUser = (cb) => {...Mock 的几大功能 创建 mock function，在测试中使用，用来测试回调 手动 mock，覆盖第三方实现，狸猫换太子 三大 API 实现不同粒度的时间控制 函数测试 function mockTest...() // 是否被参数调用 expect(mockCB).toHaveBeenCalledWith(42) // 被调用的次数 expect(mockCB).toHaveBeenCalledTimes...") // mock axios.get方法的实现 axios.get.mockImplementation(() => { return Promise.resolve({ data: { username
发送请求 axios.get(url[,config])：发送GET请求 axios.post(url,data)：发送POST请求 axios.put(url,data[,config])：发送PUT...[,config])：发送PATCH请求 axios.head(url[,config])：发送HEAD请求 axios.request(config)：发送各种请求 Promise Promise对象中提供了两个方法...then 和 catch： then：请求执行成功时调用 catch：请求失败时调用 // 执行请求返回 Promise 对象 var ajax = axios.get('https://api.myjson.com...console.log(error.config); }) axios配置 配置项 说明 url 请求地址 method 请求方法，默认是 default baseURL 请求时的基地址 headers...指明服务器返回数据的类型，默认是JSON onUploadProgress 上传文件时处理上传进程的回调函数 onDownloadProgress 下载时处理下载进度的回调函数 拦截器 在发送 AJAX
处理异步调用接口的方式。 网上一图，回调地狱：看到晕，使代码难以理解和维护。 ? 前后端的交互是什么 前后端的交互就是前端的浏览器去调用后端的接口，拿到后端的数据，在做前端的处理，进行渲染。...因为 Promise.prototype.then 和 Promise.prototype.catch 方法返回promise 对象， 所以它们可以被链式调用。 ? ? ?...它可以避免多层异步调用嵌套问题（回调地狱），promis对象提供了简洁的api，使得控制异步操作更加容易。...回调地狱，多层嵌套请求问题，请求接口调用后台数据，有两种可能性，一种为成功回调，一种为失败回调，成功后写一下成功后的操作代码，失败后也要写一下失败后的操作代码。...async 函数返回一个Promise对象，因此 async 函数通过 return 返回的值，会成为 then 方法中回调函数的参数。
实例已完成以下的配置：数据观测data observer，属性和方法的运算，watch/event事件回调。 挂载阶段还没开始，$el属性目前不可见。.../event事件回调。...keep-alive生命周期： 初次进入时：created > mounted > activated；退出后触发 deactivated；再次进入：会触发activated；事件挂载的方法等，只执行一次的放在...在created中，data和methods都已经被初始化好了，如果要调用methods中的方法，或者操作data中的数据，只能在created中操作。...fulfill，满足状态，主动回调resolve时，并且回调.then() reject，拒绝状态，回调reject时，并且回调.catch() Vuex详解 vuex是一个专门为vue.js应用程序开发的状态管理模式
，那么函数a就是高阶函数 回调函数 百度百科 回调函数就是一个通过函数指针调用的函数。...如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。...回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应。...维基百科 在计算机程序设计中，回调函数，或简称回调（Callback 即call then back 被主函数调用运算后会返回主函数），是指通过函数参数传递到其它代码的，某一块可执行代码的引用。...，但promise不是我们今天讨论的内容，我们只使用axios的ajax请求接口功能 easy-mock:接口数据，用来实现ajax请求（数据是假的，但是请求是真的） 嵌套回调 <!
基本使用 // 使用new来构建一个Promise，Promise的构造函数接收一个参数是函数，并且传入两个参数： // resolve，reject分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数...resolve状态和reject状态的回调函数 // 在then方法中，也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了 p.then(function(data...，所有任务完成后才得到结果 Promise.all方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用Promise.resolve转换为一个...中可以设置method、headers、body HTTP协议，它给我们提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT GET // GET参数传递 - 传统URL...页面中可以加载出来最新的信息 # 调用接口发送ajax 请求 var ret = await axios.get('books/' + id); this.id
promise缺点 1.一旦执行，无法中途取消，链式调用多个then中间不能随便跳出来 2.错误无法在外部被捕捉到，只能在内部进行预判处理，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部...又因为每一个Promise实例都有.then方法，因此可以采用链式写法，即then方法后面再调用另一个then方法。 采用链式的then，可以有序调用回调函数。...console.error('出错了', errorData); }); 因为.then里面的两个函数参数是非必须的，一般只写第一个的成功的回调。...，哪有那么麻烦的写法，只需要在末尾catch一下就可以了，因为链式写法的错误处理具有“冒泡”特性，链式中任何一个环节出问题，都会被catch到，同时在某个环节后面的代码就不会执行了。...所以也继承一些个方法比如.then 比如axios我们通过then也可以用then的链式调用代替回调地狱注意return出去才是一个prominse对象才可以继续使用.then created(){
， 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数 */ var p = new Promise(function(resolve, reject){ /...状态和reject状态的回调函数 // 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了 p.then(function....all() Promise.all方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用Promise.resolve转换为一个promise...并把第一个改变状态的promise的返回值，传给p的回调函数 /* Promise常用API-对象方法 *...页面中可以加载出来最新的信息 # 调用接口发送ajax 请求 var ret = await axios.get('books/' + id);
Promise基本使用 我们使用new来构建一个Promise Promise的构造函数接收一个参数，是函数，并且传入两个参数： resolve，reject， 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数...状态和reject状态的回调函数 // 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了 p.then(function....all() Promise.all方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用Promise.resolve转换为一个promise...并把第一个改变状态的promise的返回值，传给p的回调函数 /* Promise常用API-对象方法...默认的是 GET 请求 需要在 options 对象中 指定对应的 method method:请求使用的方法 post 和 普通 请求的时候 需要在options 中 设置 请求头 headers 和
严格地说，和你的程序不直接相关的其他事件也可能会插入到队列中 3.setTimeout()并没有把回调函数拍在事件循环队列中，但是设置了一个定时器，当到时后，环境会把你的回调函数放到事件循环中去，所以setTimeout...：Promise即使是立即完成的Promise也无法被同步观察到，也就是说，对一个Promise调用then()的时候，即使这个Promise已经决议，提供给then()的回调也总会被异步调用 2.调用过晚...这些回调中的做任意一个都无法影响或延误对其他回调的调用 • Promise调度技巧：永远都不应该依赖于不同Promise间回调的顺序和调度。...• 任何通过then()注册的（每个）回调只会被调用一次，如果把同一个回调注册了不止一次，那它被调用的次数就会和注册次数相同。...Promise，我们可以将其链接起来 • 不管从then()调用的完成回调（第一个参数）返回的值是什么，它都会被自动设置为被链接Promise（第一点中的）的完成 • 如果你调用
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
