next,react封装axios,http请求
import axios from 'axios';//声明一个基础接口变量1
let base_url;
//配置开发环境
if (process.env.NODE_ENV === 'development') {base_url = "http://127.0.0.1/";
}
// 配置生产环境
if (process.env.NODE_ENV === 'production') {base_url = "http://127.0.0.1/";
}
axios.defaults.baseURL = base_url;// 辅助函数:安全获取localStorage值,检测window
const getLocalStorage = () => {if (typeof window !== 'undefined') {return true;}return false;};
// 发送请求前拦载
axios.interceptors.request.use((config) => {var urlsa = config.url;var t = Date.parse(new Date()) / 1000;//时间戳if (urlsa.indexOf("?") != -1) {config.url = config.url + "&datest=" + t} else {config.url = config.url + "?datest=" + t}// 给post请求加参数if (config.data) {// 如果原本请求已经有数据(比如是JSON格式数据等情况)config.data = {...config.data,url: base_url};} else {// 如果原本请求没有数据,创建一个新的对象添加token参数config.data = { url: base_url };}if (getLocalStorage()) {config.headers.token = window.localStorage.getItem("token") ? window.localStorage.getItem("token") : "";config.headers.user = encodeURIComponent(window.localStorage.getItem("username"));}return config
}, (error) => {return Promise.reject(error)
})//发送请求返回拦载
axios.interceptors.response.use(function (response) {// 对响应数据做点什么var data = response.data;//console.log("打印请求回来")if (data.code == 2006) {if (getLocalStorage()) {window.localStorage.clear('username');//删除window.localStorage.clear('token');//删除//配置开发环境if (process.env.NODE_ENV === 'development') {window.location.href = "/login";}// 配置生产环境if (process.env.NODE_ENV === 'production') {window.location.href = "/login";}}return false;}return response;
},function (error) {return Promise.reject(error);// return false;}
);/**
* 封装的请求基类方法
* @param url 地址
* @param method 请求类型
* @param headers 头部信息
* @param data 数据(post用)
* @param params 数据(get用)
* @param success 成功返回
* @param error 失败返回
* @constructor
*/
axios.Request = function ({ url, method = "GET", data = {}, params = {}, success, error }) {let headers = '';if (method == "GET" || method == "get") {headers = 'Content-Type: application/json';} else {headers = 'Content-Type: application/x-www-form-urlencoded';}axios({url: url,headers: headers,method: method,data: data,params: params,}).then(res => {typeof success === "function" && success(res.data);}).catch(e => {typeof error === "function" && error(e);})
}/**
* get封装请求
* @param url 地址
* @param data 数据
* @param success 成功返回
* @param error 失败返回
*/
axios.getRequest = function ({ url, data }, success, error) {axios.Request({ url, method: "GET", params: data, success, error })
}/**
* post请求
* @param url 地址
* @param data 数据
* @param success 成功返回
* @param error 失败返回
*/
axios.postRequest = function ({ url, data }, success, error) {axios.Request({ url, method: "POST", data: data, success, error })
}export default axios;
使用
// use client表示客户端
"use client";
import http from '@/app/comm/http.js';http.post('/dadedadedade666',{id:121}).then((res) => {})
// app/dashboard/layout.tsx
export default function IndexLayout({ children }) {return (<div>{/* 仪表盘专属导航 */}<nav>后台导航</nav>{children} {/* 渲染 /dashboard/users 等子路由内容 */}</div>);
}
相关文章:
next,react封装axios,http请求
import axios from axios;//声明一个基础接口变量1 let base_url; //配置开发环境 if (process.env.NODE_ENV development) {base_url "http://127.0.0.1/"; } // 配置生产环境 if (process.env.NODE_ENV production) {base_url "http://127.0.0.1/"; …...
元图CAD:一键解锁PDF转CAD,OCR技术赋能高效转换
在建筑、工程与制造领域,图纸的精准性与高效协作是项目成功的关键。然而,传统PDF文件中的文字和图形往往难以直接编辑,手动输入不仅耗时易错,还可能因格式问题导致信息丢失。元图CAD凭借创新的OCR文字识别技术,重新定义…...

Android 平台RTSP/RTMP播放器SDK接入说明
一、技术背景 自2015年起,大牛直播SDK持续深耕音视频直播领域,自主研发并迭代推出跨平台 RTSP/RTMP 播放模块,具备如下核心优势: 全平台兼容:支持 Android/iOS/Windows/Linux 等主流系统; 超低延迟&#…...

Nodejs工程化实践:构建高性能前后端交互系统
一、工程架构设计 1.1 现代化项目初始化 采用多包管理架构: mkdir content-platform && cd content-platform npm init -y npx lerna init mkdir -p {packages/client,packages/server,packages/shared} 关键模块划分: client/: 基于Next.js…...

STM32什么是寄存器
提示:文章 文章目录 前言一、背景二、2.12.2 三、3.1 总结 前言 前期疑问: 1、什么是寄存器? 答:在4GB的地址空间中,512MB的block2上,每4个字节组成32位,这个32位为一个单元,控制&a…...
Linux 的 find 命令使用指南
精通 Linux 的 find 命令:终极使用指南 在 Linux 系统中,find 命令是文件搜索的瑞士军刀,它能基于多种条件在目录树中精准定位文件。无论你是系统管理员还是开发者,掌握 find 都能极大提升工作效率。本文将深入解析 find 的核心用法,并附赠实用示例! 一、基础语法结构 …...

第六个微信小程序:教师工具集
源于工作需要,下面开始。 安装及使用 | Taro 文档 vscode 代码管理 git 辅助 开发技术如上: 1.开始创建模板 taro4.1.1 $ taro init teachers-tools 2.用vsocde开始吧。 选择 第二个文件夹找一。 (base) PS D:\react\teachers-tools> pnpm…...

记录一个用了很久的git提交到github和gitee比较方便的方法
在当前git init后,在隐藏的git文件夹中找到config文件 [user]name thels [remote "github"]url your github repository urlfetch refs/heads/*:refs/remotes/origin/* [remote "gitee"]url your gitee repository urlfetch refs/heads/*:…...

Qt Qml模块功能及功能解析
QtQml 是 Qt 6.0 中用于声明式 UI 开发和应用程序逻辑的核心模块,它提供了 QML 语言的支持和运行时环境。 一、主要功能 1. QML 语言支持 QML 语法解析:支持 QML (Qt Meta-Object Language 或 Qt Modeling Language) 的完整语法 JavaScript 集成&…...
前端八股之JS的原型链
1.原型的定义 每一个对象从被创建开始就和另一个对象关联,从另一个对象上继承其属性,这个另一个对象就是 原型。 当访问一个对象的属性时,先在对象的本身找,找不到就去对象的原型上找,如果还是找不到,就去…...

NLP学习路线图(二十九):BERT及其变体
在自然语言处理(NLP)领域,一场静默的革命始于2017年。当谷歌研究者发表《Attention is All You Need》时,很少有人预料到其中提出的Transformer架构会彻底颠覆NLP的发展轨迹,更催生了以GPT系列为代表的语言模型风暴,重新定义了人类与机器的交互方式。 一、传统NLP的瓶颈:…...
机器翻译模型笔记
机器翻译学习笔记(简体中文) 1. 任务概述 目标:将英文句子翻译成简体中文。 示例: 输入:Tom is a student. 输出:汤姆是一个学生。 框架:Seq2Seq(序列到序列)模型。…...
Ref vs. Reactive:Vue 3 响应式变量的最佳选择指南
Ref vs. Reactive:Vue 3 响应式变量的最佳选择指南 在 Vue 3 的 Composition API 中,ref 和 reactive 是创建响应式数据的两种主要方式。许多开发者经常困惑于何时使用哪种方式。本文将深入对比两者的差异,帮助您做出最佳选择。 核心概念解…...
让视觉基础模型(VFMs)像大语言模型(LLMs)一样“会思考”
视觉检测器的演进:从 DETR 到 Grounding-DINO DINO-R1 的基础是 Grounding-DINO,而 Grounding-DINO 本身是一系列视觉检测器演进的结果。理解这个发展过程对掌握 DINO-R1 的核心技术至关重要。 DETR:用 Transformer 革新目标检测 在 DETR&…...
现代前端框架的发展与演进
现代前端框架的发展与演进是一个非常值得关注的话题,反映了整个前端生态系统的不断演化与技术深度的提升。以下是这一趋势的详细解析: 📈 现代前端框架的发展与演进 🔹 第一阶段:jQuery 时代(2006-2013&am…...

【LLM-Agent】智能体的记忆缓存设计
note 实践:https://modelscope-agent.readthedocs.io/zh-cn/latest/modules/memory.html 文章目录 note一、Agent的记忆实现二、相关综述三、记忆体的构建四、cursor的记忆设计1. 记忆生成提示词2. 记忆评估提示词 五、记忆相关的MCPReference 一、Agent的记忆实现…...

一起学Spring AI:核心概念
人工智能概念 本节描述了 Spring AI 使用的核心概念。我们建议您仔细阅读,以理解 Spring AI 实现背后的思想。 模型(Models) 人工智能模型是设计用来处理和生成信息的算法,通常模仿人类的认知功能。通过从大型数据集中学习模式…...
Oracle业务用户的存储过程个数及行数统计
Oracle业务用户的存储过程个数及行数统计 统计所有业务用户存储过程的个数独立定义的存储过程定义在包里的存储过程统计所有业务用户存储过程的总行数独立定义的存储过程定义在包里的存储过程📖 对存储过程进行统计主要用到以下三个系统视图: dba_objects:记录了所有独立创…...

PicSharp(图片压缩工具) v1.1.6
PicSharp 一个简单、高效、灵活的跨平台桌面图像压缩应用程序。软件基于Rust实现,高性能低资源,能快速扫描文件或目录,批处理图像。软件还具备组合压缩策略,TinyPNG提供最佳压缩比,但需要互联网连接,对大量…...

前端文件下载常用方式详解
在前端开发中,实现文件下载是常见的需求。根据不同的场景,我们可以选择不同的方法来实现文件流的下载。本文介绍三种常用的文件下载方式: 使用 axios 发送 JSON 请求下载文件流使用 axios 发送 FormData 请求下载文件流使用原生 form 表单提…...

【DAY42】Grad-CAM与Hook函数
内容来自浙大疏锦行python打卡训练营 浙大疏锦行 知识点: 回调函数lambda函数hook函数的模块钩子和张量钩子Grad-CAM的示例 作业:理解下今天的代码即可 在深度学习中,我们经常需要查看或修改模型中间层的输出或梯度。然而,标准的前向传播和反…...

如何生成和制作PDF文件
在数字化办公的今天,PDF文件已经成为我们工作和学习中不可或缺的一部分。无论是合同、报告、简历,还是电子书、表单,PDF格式都以其跨平台兼容性、不可编辑性和清晰的排版而被广泛使用。但你是否知道,生成和制作PDF文件其实并不复杂…...

【K8S系列】Kubernetes 中 Pod(Java服务)启动缓慢的深度分析与解决方案
本文针对 Kubernetes 中 Java 服务启动时间慢的深度分析与解决方案文章,结合了底层原理、常见原因及具体优化策略: Kubernetes 中 Java 服务启动缓慢的深度分析与高效解决方案 在 Kubernetes 上部署 Java 应用时,启动时间过长是常见痛点,尤其在需要快速扩缩容或滚动更新的…...

【Java学习笔记】StringBuilder类(重点)
StringBuilder(重点) 1. 基本介绍 是一个可变的字符串序列。该类提供一个与 StringBuffer 兼容的 API,但不保证同步(StringBuilder 不是线程安全的) 该类被设计用作 StringBuffer 的一个简易替换,用在字符…...
JavaScript ES6 解构:优雅提取数据的艺术
JavaScript ES6 解构:优雅提取数据的艺术 在 JavaScript 的世界中,ES6(ECMAScript 2015)的推出为开发者带来了许多革命性的特性,其中“解构赋值”(Destructuring Assignment)无疑是最受欢迎的功…...

iview Switch Tabs TabPane 使用提示Maximum call stack size exceeded堆栈溢出
在vue项目中使用iview 框架部分组件时,直接引入使用报Maximum call stack size exceeded image.png 堆栈溢出 解决方案 更换组件名称就可以了 image.png 或 image.png 就可以了 猜测是因为和vue自己提供的组件名称一致了,重名问题导致的,具体…...

基于Halcon深度学习之分类
***** ***环境准备*** ***系统:win7以上系统 ***显卡:算力3.0以上 ***显卡驱动:10.1以上版本(nvidia-smi查看指令)***读取深度学习模型*** read_dl_model (pretrained_dl_classifier_compact.hdl, DLModelHandle) ***获…...
零基础在实践中学习网络安全-皮卡丘靶场(第十五期-URL重定向模块)
本期内容和之前的CSRF,File inclusion有联系,复习后可以更好了解 介绍 不安全的url跳转 不安全的url跳转问题可能发生在一切执行了url地址跳转的地方。如果后端采用了前端传进来的(可能是用户传参,或者之前预埋在前端页面的url地址)参数作为了跳转的目…...

技巧小结:根据寄存器手册写常用外设的驱动程序
需求:根据STM32F103寄存器手册写DMA模块的驱动程序 一、分析标准库函数的写法: 各个外设的寄存器地址定义在stm32f10x.h文件中:此文件由芯片厂家提供;内核的有关定义则定义在core_cm3.h文件中:ARM提供; 1、查看外设区域多级划分…...

设计模式(代理设计模式)
代理模式解释清楚,所以如果想对一个类进行功能上增强而又不改变原来的代码情况下,那么只需要让这个类代理类就是我们的顺丰,对吧?并行增强就可以了。具体增强什么?在哪方面增强由代理类进行决定。 代码实现就是使用代理对象代理相关的逻辑…...