Vue3项目准备:utils工具插件文件夹中封装request.js配置axios请求基地址及超时时间、请求拦截器、响应拦截器

本文主要是介绍Vue3项目准备:utils工具插件文件夹中封装request.js配置axios请求基地址及超时时间、请求拦截器、响应拦截器,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

token介绍

概念:访问权限的令牌,本质上是一串字符串

创建:正确登录后,由后端签发并返回

作用:判断是否有登录状态等,控制访问权限

注意:前端只能判断token有无,而后端才能判断token的有效性

通俗地讲,每个已经登录的用户都会有一个独一无二的token,这个token是用户访问除登录页之外的其他网页、向服务器发请求的一把“钥匙”,如果token为空(没有钥匙)或用户伪造了token(钥匙是假的)或者token已过期,那么就需要将用户“踢”回登录页,让用户登录之后再访问网页

axios请求基地址及超时时间

代码如下

const baseURL = 'http://big-event-vue-api-t.itheima.net'const instance = axios.create({// TODO 1. 基础地址,超时时间baseURL,timeout: 10000
})

代码解释

  1. baseURL: 这是用于设置请求的基础地址,即请求的 URL 会以该地址为基准进行拼接。例如,如果设置了 baseURL 为 "https://api.example.com",那么在发送请求时,拼接的 URL 会以该地址作为起点。这样可以避免在每个请求中都写入完整的 URL 地址。在示例中,baseURL 是一个变量,可能是在其他地方定义的。

  2. timeout: 这是用于设置请求的超时时间,单位为毫秒。如果请求在指定的时间内没有收到响应,那么该请求会被取消。在示例中,timeout 被设置为 10000 毫秒,即 10 秒。

axios请求拦截器

发起请求之前,触发的配置函数,对请求参数进行额外配置

举个例子,我们上面提到token是用户向服务器发请求的一把“钥匙”,那么用户发请求肯定需要在请求头携带token

那么我们可以在请求拦截器里把token配置到请求头里,这样每一个请求的请求头都会自动携带token,代码如下

// 请求拦截器
instance.interceptors.request.use((config) => {// TODO 2. 携带tokenconst useStore = useUserStore()if (useStore.token) {config.headers.Authorization = useStore.token}return config},(err) => Promise.reject(err)
)

 代码解读

axios响应拦截器 

响应回到then/catch 之前,触发的拦截函数,对响应结果统一处理

一般来说,服务器响应对象res.data.code === 0(或者200)时为请求成功,其余情况为请求失败,请求失败时我们需要根据错误状态码进行相应的处理,比如处理业务失败时需要将响应的错误信息打印在屏幕上给用户看到,在用户token过期时我们需要把用户“踢”回登录页

而这些错误状态的处理,我们都可以在响应拦截器里进行配置,代码如下

// 响应拦截器
instance.interceptors.response.use((res) => {// TODO 4. 摘取核心响应数据if (res.data.code === 0) {return res}// TODO 3. 处理业务失败// 处理业务失败, 给错误提示,抛出错误ElMessage.error(res.data.message || '服务异常')return Promise.reject(res.data)},(err) => {// TODO 5. 处理401错误// 错误的特殊情况 => 401 权限不足 或 token 过期 => 拦截到登录if (err.response?.status === 401) {router.push('/login')}// 错误的默认情况 => 只要给提示ElMessage.error(err.response.data.message || '服务异常')return Promise.reject(err)}
)

其中,返回的res就是then服务器响应对象,err就是catch服务器响应对象

你有可能会疑惑return Promise.reject(err)的作用,它的作用是抛出异常,中断程序。以用户登录为例,代码如下,注意一定要用await等待响应结果,否则响应还没返回下面三行代码就执行完了

现在想想,我之前的代码称之为“屎山代码”真的一点都不为过,由于之前一直不会请求拦截器和响应拦截器,所以我判断token是否过期的方法就是在每一个请求的后面加上一个判断,如果状态码时2001,代表token过期,“踢”回登录页

真的要被我自己蠢笑了

request.js文件的使用

由于request.js里封装了axios以及axios请求基地址、超时时间、请求拦截器、响应拦截器,所以我们在其他需要编写请求代码的文件中可以导入request.js,然后通过request.post(或者equest.get或者……)就可以发起请求啦

比如我在,src文件夹下新建api文件夹用来统一编写请求,在api文件夹下新建一个user.js用来编写用户信息相关的请求

如何使用这些请求呢?在需要的vue页面中导入使用就好啦

比如登录页面中的登录逻辑

//导入登录函数
import { userLoginService } from '@/api/user.js'const Login = async () => {if (userName.value.trim() === '') {ElMessage.error('请填写用户名!')return} else if (password.value.trim() === '') {ElMessage.error('请填写密码!')return} else {const res = await userLoginService({username: userName.value,password: password.value})userStore.setToken(res.data.token)ElMessage.success('登录成功')router.push('/layout')}
}

 

这篇关于Vue3项目准备:utils工具插件文件夹中封装request.js配置axios请求基地址及超时时间、请求拦截器、响应拦截器的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1039046

相关文章

maven中的maven-antrun-plugin插件示例详解

《maven中的maven-antrun-plugin插件示例详解》maven-antrun-plugin是Maven生态中一个强大的工具,尤其适合需要复用Ant脚本或实现复杂构建逻辑的场景... 目录1. 核心功能2. 典型使用场景3. 配置示例4. 关键配置项5. 优缺点分析6. 最佳实践7. 常见问题

windows系统上如何进行maven安装和配置方式

《windows系统上如何进行maven安装和配置方式》:本文主要介绍windows系统上如何进行maven安装和配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录1. Maven 简介2. maven的下载与安装2.1 下载 Maven2.2 Maven安装2.

Python使用FFmpeg实现高效音频格式转换工具

《Python使用FFmpeg实现高效音频格式转换工具》在数字音频处理领域,音频格式转换是一项基础但至关重要的功能,本文主要为大家介绍了Python如何使用FFmpeg实现强大功能的图形化音频转换工具... 目录概述功能详解软件效果展示主界面布局转换过程截图完成提示开发步骤详解1. 环境准备2. 项目功能结

Apache 高级配置实战之从连接保持到日志分析的完整指南

《Apache高级配置实战之从连接保持到日志分析的完整指南》本文带你从连接保持优化开始,一路走到访问控制和日志管理,最后用AWStats来分析网站数据,对Apache配置日志分析相关知识感兴趣的朋友... 目录Apache 高级配置实战:从连接保持到日志分析的完整指南前言 一、Apache 连接保持 - 性

MySQL 安装配置超完整教程

《MySQL安装配置超完整教程》MySQL是一款广泛使用的开源关系型数据库管理系统(RDBMS),由瑞典MySQLAB公司开发,目前属于Oracle公司旗下产品,:本文主要介绍MySQL安装配置... 目录一、mysql 简介二、下载 MySQL三、安装 MySQL四、配置环境变量五、配置 MySQL5.1

Linux系统之stress-ng测压工具的使用

《Linux系统之stress-ng测压工具的使用》:本文主要介绍Linux系统之stress-ng测压工具的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、理论1.stress工具简介与安装2.语法及参数3.具体安装二、实验1.运行8 cpu, 4 fo

Maven项目中集成数据库文档生成工具的操作步骤

《Maven项目中集成数据库文档生成工具的操作步骤》在Maven项目中,可以通过集成数据库文档生成工具来自动生成数据库文档,本文为大家整理了使用screw-maven-plugin(推荐)的完... 目录1. 添加插件配置到 pom.XML2. 配置数据库信息3. 执行生成命令4. 高级配置选项5. 注意事

mybatis的mapper对应的xml写法及配置详解

《mybatis的mapper对应的xml写法及配置详解》这篇文章给大家介绍mybatis的mapper对应的xml写法及配置详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,... 目录前置mapper 对应 XML 基础配置mapper 对应 xml 复杂配置Mapper 中的相

eclipse如何运行springboot项目

《eclipse如何运行springboot项目》:本文主要介绍eclipse如何运行springboot项目问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目js录当在eclipse启动spring boot项目时出现问题解决办法1.通过cmd命令行2.在ecl

python web 开发之Flask中间件与请求处理钩子的最佳实践

《pythonweb开发之Flask中间件与请求处理钩子的最佳实践》Flask作为轻量级Web框架,提供了灵活的请求处理机制,中间件和请求钩子允许开发者在请求处理的不同阶段插入自定义逻辑,实现诸如... 目录Flask中间件与请求处理钩子完全指南1. 引言2. 请求处理生命周期概述3. 请求钩子详解3.1