ajax+axios——统一设置请求头参数——添加请求头入参——基础积累

最近在写后台管理系统(我怎么一直都只写管理系统啊啊啊啊啊啊啊),遇到一个需求,就是要在原有系统的基础上,添加一个仓库的切换,并且需要把选中仓库对应的id以请求头参数的形式传递到每一个接口当中。。。

需求场景

在这里插入图片描述

在这里插入图片描述
如上图所示:需要在接口请求头中添加一个Storeid参数。

之前在博客中写过单个接口添加请求头的方法,如下面的代码,也是可以实现的。

ajax——单个接口请求头设置方法1:

$.ajax({url: "/bigscreen/home/getDeptRiskInfoById",async: false,//是否异步,如果开启,则接口同步进行type: "GET",//大写的GET等同于小写的getdata: {deptId: id,},headers: { "token": token },//设置请求头success: function (data) {//}
});

ajax——单个接口请求头设置方法2:

$.ajax({url: "/api/SchemeMain?id=" + row.id,type: "delete",beforeSend: (request) => {request.setRequestHeader("operator", encodeURIComponent(this.userName));request.setRequestHeader("operatorId", this.userId);},xhrFields: {withCredentials: true},success: res => {if (res.success) {this.$message.success('删除成功');} else {this.$message.error(res.message);}},complete: () => {}
})

但是由于当前系统改装,接口实在是太多,则我这边需要全局设置一下请求头:

ajax——全局设置请求头的方法

前提是需要引入jquery,事先我是将仓库id以localstorage的形式存储到本地缓存中了,缓存名称:currentStoreId

<script>// 设置全局的默认请求头$.ajaxSetup({headers: {'StoreId': localStorage.getItem('currentStoreId') // 设置 Authorization 字段}});
</script>

同理,axios的全局设置请求头的方法如下:

axios——全局设置请求头的方法

import axios from 'axios';
import Cookie from 'js-cookie';
const BASE_URL = process.env.VUE_APP_API_BASE_URL;
axios.defaults.timeout = 20000;
axios.defaults.withCredentials = false;
axios.defaults.baseURL = BASE_URL;
axios.defaults.headers.common['Authorization'] = getAuthorization();
axios.defaults.headers.common['ceshi'] = '2222'; //可以设置组织架构id

效果如下所示:
在这里插入图片描述
完成!!!多多积累,多多收获!!!

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

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

相关文章

【动态规划】C++ 算法458:可怜的小猪

作者推荐 视频算法专题 涉及知识点 动态规划 数学 力扣458:可怜的小猪 有 buckets 桶液体&#xff0c;其中 正好有一桶 含有毒药&#xff0c;其余装的都是水。它们从外观看起来都一样。为了弄清楚哪只水桶含有毒药&#xff0c;你可以喂一些猪喝&#xff0c;通过观察猪是否…

nRF 5340环境搭建和工具下载(采用vscode最新搭建教程)

1. nRF 5340环境搭建和工具下载 1. 1 软件安装 nRF Connect for Desktop https://www.nordicsemi.com/Products/Development-tools/nrf-connect-for-desktop nRF Command Line Tools https://www.nordicsemi.com/Products/Development-tools/nrf-command-line-tools/downl…

U-Boot学习(2):U-Boot编译和.config配置文件生成分析

上一节U-Boot学习(1)&#xff1a;简介及命令行指令详解中&#xff0c;介绍了如何使用U-Boot。我们知道一个U-Boot可能要适配不同的硬件&#xff0c;所以不同的硬件就有不同的配置&#xff0c;配置后就可以编译U-Boot&#xff0c;最终生成镜像。U-Boot如何编译&#xff0c;以什么…

静态网页设计实践(HTML+CSS)

一、前端程序员必会三大编程语言 &#xff08;一&#xff09;HTML&#xff08;.html/.htm&#xff09; 超文本标记语言&#xff08;HyperText Markup Language&#xff0c;简称:HTML&#xff09;是一种用于创建网页的标准标记语言。HTML是一种基础技术&#xff0c;常与CSS、Ja…

PHP企业物资管理系统源码带文字安装教程

PHP企业物资管理系统源码带文字安装教程 技术架构 主要框架 : PHP7.0 laravel5.4  mysql5.5.36 composer1.3.2(依赖管理) 前端 : jquery bootstrap jstree&#xff08;树形结构&#xff09; echart&#xff08;图表&#xff09; layer&#xff08;弹出层&#xff09; 企…

Triumphcore FPGA调测试记录

FPGA采用Xilinx pynq Z2开发板。基于V2.5版本开发 OverView uart端口映射 BUG调试记录 2024.1.7 复位状态导致取指时序错误 错误波形&#xff1a; 正确波形 问题代码&#xff1a; 2024.1.9 clock_wizard设置输入时钟是输出时钟的2^n倍&#xff0c;输出时钟的占空比才…

随机生成id——uuid

1.在VScode打开终端安装 npm i nanoid 2.按需引入nanoid中的nanoid即可 import {nanoid} from nanoid 3.使用nanoid const todoObj {id:nanoid(),title:this.title,done:false} 4.举例&#xff1a; <script> import {nanoid} from nanoidexport default {name:M…

使用AUTOSAR来开发汽车基础软件的优点

1、高质量。以前我们采用手写代码的方式&#xff0c;是几个工程师在战斗。现在我们采用平台&#xff0c;BSW代码都是供应商提供的&#xff0c;我们相当于后面还有一个团队陪着我们在战斗。 2、低成本。大家都说采用AUTOSAR平台好贵&#xff0c;但是从长远来看是值得的&#xff…

vscode 创建文件自动添加注释信息

随机记录 目录 1. 背景介绍 2. "Docstring Generator"扩展 2.1 安装 2.2 设置注释信息 3. 自动配置py 文件头注释 1. 背景介绍 在VS Code中&#xff0c;您可以使用扩展来为新创建的Python文件自动添加头部注释信息。有几个常用的扩展可以实现此功能&#xff0…

频率的高低与辐射强度有关系吗?

摘要: 频率的高低和辐射强度之间存在一定的关系。 一般而言&#xff0c;频率越高&#xff0c;辐射强度越大&#xff0c;即电磁辐射的能量越大。这是因为电磁波的能量与其频率成正比。在电磁波谱中&#xff0c;如X光和伽玛射线具有高频率和强辐射强度&#xff0c;可以破坏构成 .…

Wordpress网站开发问题解决——除了主页之外的所有页面都是“找不到页面内容”(修复记录)

一条纯经验操作 引言慌火上浇油后台查看 解决之路结尾 引言 最近 阿里云老是提醒我边缘计算机控制升级 我自己建立了一个网站&#xff0c;用的就是阿里云的万网服务器 所以 我去看看 结果跟我没什么关系 本以为就这么愉快地结束了 没想到 我建立的网站就只能打开主页 其他页…

海量数据处理数据结构之Hash与布隆过滤器

前言 随着网络和大数据时代的到来&#xff0c;我们如何从海量的数据中找到我们需要的数据就成为计算机技术中不可获取的一门技术&#xff0c;特别是近年来抖音&#xff0c;快手等热门短视频的兴起&#xff0c;我们如何设计算法来从大量的视频中获取当前最热门的视频信息呢&…