AJAX-项目优化(目录、基地址、token、请求拦截器)

目录管理

基地址存储

 在utils/request.js配置axios请求基地址

作用:提取公共前缀地址,配置后axios请求时都会baseURL+url

填写API的公共前缀后,将js文件导入到html文件中

<script src="../../utils/request.js"></script>

再使用axios请求接口的时候,只写API地址后半段

token

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

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

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

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

如果很多接口都需要用header传递token,那么可以在请求拦截器里统一设置公共headers选项

官网:拦截器 | Axios中文文档 | Axios中文网

axios请求拦截器

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

在utils/request.js中配置拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么//统一携带token令牌字符串在请求头上const token = localStorage.getItem('token')token && (config.headers.Authorization = token)return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});

axios响应拦截器

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

// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么return response;}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么,例如:统一对401身份验证失败情况做出处理if(error?.response?.status === 401){alert('身份验证失败,请重新登录')}return Promise.reject(error);});

优化响应结果:可以观察返回信息的层级,把return response改为return response.data(或其他),这样获取到的返回信息都由response下的信息变为了response.data下的信息

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI新工具 又一个开源大模型DBRX击败GPT3.5;根据音频和图像输入生成会说话、唱歌的动态视频

✨ 1: AniPortrait 腾讯开源&#xff1a;根据音频和图像输入生成会说话、唱歌的动态视频 AniPortrait 是个先进的框架&#xff0c;专门用来生成高质量的、由音频和参考肖像图片驱动的动画。如果你有视频&#xff0c;也可以用来实现面部的再现&#xff08;Face reenactment&am…

【氮化镓】位错对氮化镓(GaN)电子能量损失谱(EEL)的影响

本文献《Influence of dislocations on electron energy-loss spectra in gallium nitride》由C. J. Fall等人撰写&#xff0c;发表于2002年。研究团队通过第一性原理计算&#xff0c;探讨了位错对氮化镓&#xff08;GaN&#xff09;电子能量损失谱&#xff08;EEL&#xff09;…

内网穿透_ICMP_icmpsh

目录 一、ICMP协议详解 二、ICMP隧道 (一) 为什么会使用ICMP (二) 实验环境 (三) 操作流程 1. 下载icmpsh 2. 下载并安装依赖 3. 关闭本地icmp响应 4. 攻击机启动服务端开始监听 5. 靶机启动工具客户端 6. 攻击机接受到靶机传来的数据 三、郑重声明 一、ICMP协议详…

C# 反射的使用及场景

1&#xff0c;使用反映将一个对象的同名属性赋值给另一个对象 2, DataTable 转换成一个实体 3&#xff0c;使用反射动态执行方法 4,根据属性信息来执行对应的方法 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using…

Spring用到了哪些设计模式?

目录 Spring 框架中⽤到了哪些设计模式&#xff1f;工厂模式单例模式1.饿汉式&#xff0c;线程安全2.懒汉式&#xff0c;线程不安全3.懒汉式&#xff0c;线程安全4.双重检查锁&#xff08;DCL&#xff0c; 即 double-checked locking&#xff09;5.静态内部类6.枚举单例 代理模…

【论文阅读】UniLog: Automatic Logging via LLM and In-Context Learning

注 由于其公司的保密政策&#xff0c;本文没有公开源代码&#xff0c;数据是公开的。 文章目录 摘要一、介绍二、背景和动机2.1、日志语句生成2.2、大语言模型2.3、上下文学习&#xff08;In-Context Learning&#xff0c;ICL) 三、UNILOG3.1、模型骨干3.2、提示策略3.2.1、提…

3d金属模型灯怎么安装---模大狮模型网

在3D场景中&#xff0c;添加灯光是非常重要的步骤&#xff0c;可以提升场景的氛围和逼真度。特别是对于金属材质的模型&#xff0c;合适的灯光设置能够突出其质感和反射效果。下面将介绍如何在3D软件中安装金属模型灯&#xff0c;并分为以下四个分类进行详细说明。 一、选择合适…

竞赛 python+opencv+深度学习实现二维码识别

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; pythonopencv深度学习实现二维码识别 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;3分 该项目较为新颖&…

【InternLM 实战营第二期笔记】书生·浦语大模型全链路开源体系及InternLM2技术报告笔记

大模型 大模型成为发展通用人工智能的重要途径 专用模型&#xff1a;针对特定任务&#xff0c;一个模型解决一个问题 通用大模型&#xff1a;一个模型应对多种任务、多种模态 书生浦语大模型开源历程 2023.6.7&#xff1a;InternLM千亿参数语言大模型发布 2023.7.6&#…

视觉信息处理与FPGA实现第八次作业——verilog实现对比度调节

一、查看灰度图的数据格式 2.1 安装HxD HxD下载链接&#xff1a;https://download.csdn.net/download/weixin_44357071/89045331 解压直接打开exe就能使用。 将需要查看二进制数据的图片拖到软件框里就能读取 2.2 找到bmp图像的图片点阵数据起始地址&#xff0c;原理和例子…

R语言批量计算t检验,输出pvalue和均值

1.输入数据如下&#xff1a; 2.代码如下 setwd("E:/R/Rscripts/rG4相关绘图") # 读取CSV文件 data <- read.csv("box-cds-ABD-不同类型rg4-2.csv", stringsAsFactors FALSE)# 筛选出Type2列为指定五种类型的数据 filtered_data <- subset(data, …

使用Kaggle API快速下载Kaggle数据集

前言 在使用Kaggle网站下载数据集时&#xff0c;直接在网页上点击下载可能会很慢&#xff0c;甚至会出现下载失败的情况。本文将介绍如何使用Kaggle API快速下载数据集。 具体步骤 安装Kaggle API包 在终端中输入以下命令来安装Kaggle API相关的包&#xff1a; pip install…

elementplus-vue-审核按钮-对话框(Dialog )

效果图&#xff1a; 代码&#xff1a; <template> <el-button type"success" click"dialogVisible true" :icon"Edit">审核</el-button> <el-dialog v-model"dialogVisible" title"是否通过" width&q…

公链角逐中突围,Solana 何以成为 Web3 世界的流量焦点?

在众多区块链公链中&#xff0c;Solana 凭借其创纪录的处理速度和极低的交易费用&#xff0c;成为了众多开发者和投资者的宠儿。就像网络上流行的那句话所说&#xff1a;“Why slow, when you can Solana?”&#xff0c;Solana 正以它的速度和强大的生态系统&#xff0c;重新定…

uniApp使用XR-Frame创建3D场景(5)材质贴图的运用

上一篇讲解了如何在uniApp中创建xr-frame子组件并创建简单的3D场景。 这篇我们讲解在xr-frame中如何给几何体赋予贴图材质。 先看源码 <xr-scene render-system"alpha:true" bind:ready"handleReady"><xr-node><xr-assets><xr-asse…

AcWing 800. 数组元素的目标和(哈希)

原题链接 哈希思路: 我们可以在输入 时把每个数存进哈希表里&#xff0c;对于每个输入的 b[i]看看 x−b[i]是否出现与哈希表即可。 图解 #include <iostream> #include <algorithm> #include <unordered_map> using namespace std;const int N 111111;in…

【网安小白成长之路】3.MySQL环境配置以及常用命令(增删改查)

&#x1f42e;博主syst1m 带你 acquire knowledge&#xff01; ✨博客首页——syst1m的博客&#x1f498; &#x1f51e; 《网安小白成长之路(我要变成大佬&#x1f60e;&#xff01;&#xff01;)》真实小白学习历程&#xff0c;手把手带你一起从入门到入狱&#x1f6ad; &…

RabbitMQ3.x之四_RabbitMQ角色说明及创建用户与授权

RabbitMQ3.x之四_角色说明及创建用户与授权 文章目录 RabbitMQ3.x之四_角色说明及创建用户与授权1. 访问和授权1. Tags说明2. 命令行示例 2. 管理界面新建用户及访问授权1. 管理界面新建用户2. 管理界面中的授权说明3. guest用户不能远程登录提示 3. 创建用户1. 基本命令2. 实际…

大型矿业集团安全知识竞赛主持词

男&#xff1a;尊敬的各位领导&#xff0c;员工同志们&#xff1a; 合&#xff1a;大家好&#xff01; 男&#xff1b;首先让我们以热烈的掌声对公司领导亲临比赛现场指导观看表示欢迎&#xff01; 男&#xff1b;继成功开展了荣辱观专题讲座、好矿嫂女红艺术展、安全谜语竞猜…

RabbitMQ 实验消费原始队列消息, 拒绝(reject)投递死信交换机过程

如果你想通过 RabbitMQ 的死信队列功能实现消费者拒绝消息投递到死信交换机的行为&#xff0c;你可以按照以下步骤操作&#xff1a; 创建原始队列&#xff0c;并将其绑定到一个交换机上&#xff1a; export RABBITMQ_SERVER127.0.0.1 export RABBITMQ_PORT5672 export RAB…