前言乘着年底没什么事，把axios和axios-retry的源码简单看了下，总结了下一些最佳实践。axios本身axios有个很便捷的使用方式，就是它既可以作为函数发起请求：axios()，也能通过它身上的属性，如：get、post、delete等来发起对应请求，也可以通过axios.request()来发起更加灵活配置请求，甚至还能通过axios.create()来创建自定义配置的请求实例。为什么它能有这么多请求方式？其实就是axios本身就是axios.request这个方法的bind返回值，当我们import引入这个axios的时候，引入的是request函数。import axi...
前言一直很头疼axios的失败重试插件axios-retry会重复调用axios自定义的响应错误拦截器，而我们常常会在这个拦截器中编写一个用于弹出错误消息的弹窗，这就导致了一个问题：如果我们失败会重试3次，那么全部都失败的话就会触发4次响应错误拦截器，然后就会导致触发4次错误消息的弹窗，非常蛋疼。为此常常需要考虑怎么避免重复触发的问题，常见的一些做法比如通过自定义的拦截器接受的error对象上的config属性，添加一个计数器来处理，如果计数器大于等于3的话就可以触发消息弹窗。本来axios-retry插件本身就会在config上注入一个计数的属性和总次数，但是也没法用，实际测试中发现，...
前端发送token到后端，一般有三种方式：链接中携带token，query参数post这种请求body中携带token头信息携带token但是事实上http已经为我们提供了传token的方式，是一个相对来说比较安全的方式，就是HttpBearerAuth 其实他也是一个头信息来着，只是相对来说多了一点操作，在apipost软件中，我们可以直接可视化设置如果是axios，则是需要添加一个头信息：axios({ method: 'get', url: url, responseType: 'blob', headers:...
具体的反代我其实在之前《nuxt 入坑的那些事》就说过了，这里就不多说，主要是讲下我们自己axios怎么处理反代。在nuxt中我们其实可以自己封装一个axios模块来使用，也就是常见的后台管理项目中对aixos模块化的用法。常常就是import引入axios，然后使用拦截器进行加工处理，然后在导出，使用的时候import这个axios。import axios from "axios"; let api = axios.create({ baseURL: xxxxxx, timeout: 15000, }); //请求前 api.interceptors.r...
在axios速读中，我们了解到axios请求的取消方法。const CancelToken = axios.CancelToken; //请求前拦截器 axios.interceptors.request.use(function(config) { //添加取消token const source = CancelToken.source(); config.cancelToken = source.token; //取消请求 source.cancel("取消请求"); return config; }, fu...
快速了解axios常用功能，适用于对axios有一定使用经验的人。常用请求方法的参数axios.get(url, config);get方法支持两个参数，第一个是url，第二个是{}键值对配置对象。axios.post(url, data, config);post方法支持三个参数：请求地址，上传的数据{}，{}键值对配置对象。当然还有一些其他请求类型，可以查看官方文档，这两种常用。除了.xxx方法使用协议，还可以直接传入配置对象的形式使用。axios({ method:'get', url:'xxxx', })这种方式比较适合封装使用。适...
同事写的，我也是借花献佛，顺带做个笔记axios拦截器添加取消请求的方法因为我们需要在路由进入前判断有没有存在取消请求的方法，所以需要一个存储介质，选用数组，然后存放在vuex中，一是方便动态追踪，二是本来就在axios和router里面import了vuex，就没必要添加window的全局变量了。import axios from "axios"; import store from "./store"; //vuex //拦截器 api.interceptors.request.use(config => { //设置取消请求的...
前端在api请求的时候，有时候可能会遇到发送多个请求的时候，但是实际有效的是最后一次，但是后端响应的值不一定是你最后一次发送的请求，有可能最后一次比之前的还要更快响应，这就导致用户切换到a数据，前端显示是b数据。解决这个情况有很多种方式，比如改动api请求方式，或者请求如果重复同一个接口，取消前面的请求，发起新的请求。这里我们是后者。使用方式官方提供了两个例子，第一个例子照着写怎么都没用，第二个没看懂他的参数到底是data的还是谁的，最终还是百度了好多文章，才渐渐明白。首先，我的项目使用的axios是二次封装的，也就是通过axios.create()方法预设了baseURL和拦截器的，最...
修改协议最近发现axios的修改协议有个很方便的操作，就是通过create创建一个axios对象的时候，就可以直接设置上传协议了。const api = axios.create({ headers: { 'Content-Type': 'application/x-www-form-urlencoded', } }); 这样我们将协议改为了application/x-www-form-urlencoded这个协议可以上传formData对象，但是他不能上传文件，所以如果你要上传文件，需要改为这个协议：multipart/fo...
最近遇到如题的一个需求，因为很常用，所以我把它记录下来，方便以后使用。流程用户正常使用时，或者后台刷新了缓存，导致登录超时或者失效，前端api请求得到一个信息，比如code=10010，那么就表示用户登录信息失效了，前端页面就需要提示用户登录失效了，需要重新登录。用户点击确认后，我们删除本地token，然后路由跳转。跳转之前我们需要记录当前的路由，这样用户登录成功后可以跳转回来，体验极好。233...流程示意：登录失效 --> 前端api请求时得到code=10010 --> 弹出提示窗口 --> 用户点击 重新登录 --> 清除token --> ...
没有更多了
最近评论