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

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

需求场景

如上图所示:需要在接口请求头中添加一个Storeid参数。

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

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

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

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

js 复制代码
$.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

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

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

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

js 复制代码
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

效果如下所示:

完成!!!多多积累,多多收获!!!

相关推荐
DoraBigHead2 分钟前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
Xiaouuuuua1 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser1 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
深耕AI1 小时前
【教程】在ubuntu安装Edge浏览器
前端·edge
倔强青铜三1 小时前
苦练Python第4天:Python变量与数据类型入门
前端·后端·python
倔强青铜三1 小时前
苦练Python第3天:Hello, World! + input()
前端·后端·python
上单带刀不带妹1 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript
倔强青铜三2 小时前
苦练Python第2天:安装 Python 与设置环境
前端·后端·python
我是若尘2 小时前
Webpack 入门到实战 - 复习强化版
前端
晓13132 小时前
JavaScript基础篇——第五章 对象(最终篇)
开发语言·前端·javascript