资源链接:
原文链接:
前端对axios的封装理解和基本使用
ruoyi的前端对axios进行了封装,让我们发get请求或者是post请求更加方便了。
ruoyi对axios的封装在下面文件中:
打开文件,可以看到它有三个显眼的方法,分别是request拦截器、response拦截器和通用下载方法。
request拦截器
Get请求
request拦截器对我们发送的请求进行了封装,当我们发送Get请求,那么我们携带参数的时候应该用param。,对应下面的源码。 // get请求映射params参数 if (config.method === 'get' && config.params) { let url = config.url + '?' + tansParams(config.params); url = url.slice(0, -1); config.params = {}; config.url = url; }
通过此这简单的代码,可以让get请求自动变为我们熟悉的形式[http://xxxxx:port/aaa?key1=value1&key2=value2]。如需要详细了解,同学们可以利用单元测试的方法测试即可。
来看一个get请求的案例:
// 获取验证码 不带参数 export function getCodeImg() { return request({ url: '/captchaImage', headers: { isToken: false }, method: 'get', timeout: 20000 }) } // 查询在线用户列表 带参数 export function list(query) { return request({ url: '/monitor/online/list', method: 'get', params: query }) }
当我们查看在线用户的时候:发现确实用的param,而且确实请求变成了http://xxxxx:port/aaa?key1=value1&key2=value2的样子,江哥你没有骗我:
话说回来,这个在线用户的功能怎么实现的呢?
直接告诉大家结论:ruoyi的在线用户存在redis中的,每次一个人登录,就会把他的登录信息存在redis中,当我们去查询在线用户,无非就是去redis中取一下有哪一些用户罢了!
具体而言,它使用redis的查询巧妙实现的(视频中debug),详细见视频。
我们还发现登录人具有一个TTL(保持登录状态的有效期),还发现登录人具有他的许许多多的信息......
Post
Post请求带参数使用data。
具体代码也差不多:
if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) { const requestObj = { url: config.url, data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data, time: new Date().getTime() } const sessionObj = cache.session.getJSON('sessionObj') if (sessionObj === undefined || sessionObj === null || sessionObj === '') { cache.session.setJSON('sessionObj', requestObj) } else { const s_url = sessionObj.url; // 请求地址 const s_data = sessionObj.data; // 请求数据 const s_time = sessionObj.time; // 请求时间 const interval = 1000; // 间隔时间(ms),小于此时间视为重复提交 if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) { const message = '数据正在处理,请勿重复提交'; console.warn(`[${s_url}]: ` + message) return Promise.reject(new Error(message)) } else { cache.session.setJSON('sessionObj', requestObj) } } }
响应拦截器
用于每一个响应的拦截过滤处理。
对不同状态码进行判断给出处理逻辑,并不是特别重要。
资料来源:
这里有一个request拦截器,request请求又涉及到GET请求和POST请求
发请求分为POST请求和GET请求
若依发送GET请求,必须用param
通过这行代码自动将请求转换成这种形式
不带参数
带了一个参数
若依在axios中首先创建了一个axios实例
之后对GET请求做了一个特殊处理,拼接字符串