next,react封装axios,http请求

news2025/6/9 3:45:01
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>
    );
}

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

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

相关文章

Android 平台RTSP/RTMP播放器SDK接入说明

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

Nodejs工程化实践:构建高性能前后端交互系统

一、工程架构设计 1.1 现代化项目初始化 采用多包管理架构&#xff1a; mkdir content-platform && cd content-platform npm init -y npx lerna init mkdir -p {packages/client,packages/server,packages/shared} 关键模块划分&#xff1a; client/: 基于Next.js…

STM32什么是寄存器

提示&#xff1a;文章 文章目录 前言一、背景二、2.12.2 三、3.1 总结 前言 前期疑问&#xff1a; 1、什么是寄存器&#xff1f; 答&#xff1a;在4GB的地址空间中&#xff0c;512MB的block2上&#xff0c;每4个字节组成32位&#xff0c;这个32位为一个单元&#xff0c;控制&a…

第六个微信小程序:教师工具集

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

记录一个用了很久的git提交到github和gitee比较方便的方法

在当前git init后&#xff0c;在隐藏的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 开发和应用程序逻辑的核心模块&#xff0c;它提供了 QML 语言的支持和运行时环境。 一、主要功能 1. QML 语言支持 QML 语法解析&#xff1a;支持 QML (Qt Meta-Object Language 或 Qt Modeling Language) 的完整语法 JavaScript 集成&…

NLP学习路线图(二十九):BERT及其变体

在自然语言处理(NLP)领域,一场静默的革命始于2017年。当谷歌研究者发表《Attention is All You Need》时,很少有人预料到其中提出的Transformer架构会彻底颠覆NLP的发展轨迹,更催生了以GPT系列为代表的语言模型风暴,重新定义了人类与机器的交互方式。 一、传统NLP的瓶颈:…

【LLM-Agent】智能体的记忆缓存设计

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

一起学Spring AI:核心概念

人工智能概念 本节描述了 Spring AI 使用的核心概念。我们建议您仔细阅读&#xff0c;以理解 Spring AI 实现背后的思想。 模型&#xff08;Models&#xff09; 人工智能模型是设计用来处理和生成信息的算法&#xff0c;通常模仿人类的认知功能。通过从大型数据集中学习模式…

PicSharp(图片压缩工具) v1.1.6

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

前端文件下载常用方式详解

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

【DAY42】Grad-CAM与Hook函数

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

如何生成和制作PDF文件

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

【K8S系列】Kubernetes 中 Pod(Java服务)启动缓慢的深度分析与解决方案

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

【Java学习笔记】StringBuilder类(重点)

StringBuilder&#xff08;重点&#xff09; 1. 基本介绍 是一个可变的字符串序列。该类提供一个与 StringBuffer 兼容的 API&#xff0c;但不保证同步&#xff08;StringBuilder 不是线程安全的&#xff09; 该类被设计用作 StringBuffer 的一个简易替换&#xff0c;用在字符…

iview Switch Tabs TabPane 使用提示Maximum call stack size exceeded堆栈溢出

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

基于Halcon深度学习之分类

***** ***环境准备*** ***系统&#xff1a;win7以上系统 ***显卡&#xff1a;算力3.0以上 ***显卡驱动&#xff1a;10.1以上版本&#xff08;nvidia-smi查看指令&#xff09;***读取深度学习模型*** read_dl_model (pretrained_dl_classifier_compact.hdl, DLModelHandle) ***获…

技巧小结:根据寄存器手册写常用外设的驱动程序

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

设计模式(代理设计模式)

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

从代码学习深度强化学习 - 初探强化学习 PyTorch版

文章目录 前言强化学习的概念强化学习的环境强化学习中的数据强化学习的独特性总结前言 本文将带你初步了解强化学习 (Reinforcement Learning, RL) 的基本概念,并通过 PyTorch 实现一些简单的强化学习算法。强化学习是一种让智能体 (agent) 通过与环境 (environment) 的交互…