vue3 封装request请求

news2024/12/14 7:03:50

vue3 原生请求封装 我这里用一个案例来解释

需求:把vue3原生的静态页 集成到 vue2 的若依项目 并且可以访问 vue2接口

在vue3 src 下的 utils 下 创建文件request.ts文件

import axios from "axios";
import { showMessage } from "./status"; // 引入状态码
import { ElMessage } from "element-plus"; // 引入提示框

// 设置接口超时时间
axios.defaults.timeout = 60000;
axios.defaults.baseURL = "/dev-api" || "";  // 自定义接口地址

const token = () => {
    if (sessionStorage.getItem("token")) {
        return sessionStorage.getItem("token");
    } else {
        return sessionStorage.getItem("token");
    }
};

const getCookie = (name) => {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
};

//请求拦截
axios.interceptors.request.use(
    (config) => {
        // 配置请求头
        config.headers["Content-Type"] = "application/json;charset=UTF-8";
        config.headers["token"] = token();
        //配置令牌等
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);

// 响应拦截
axios.interceptors.response.use(
    (response) => {
        return response;
    },
    (error) => {
        const { response } = error;
        if (response) {
            // 请求已发出,但是不在2xx的范围
            showMessage(response.status); // 传入响应码,匹配响应码对应信息
            return Promise.reject(response.data);
        } else {
            ElMessage.warning("网络连接异常,请稍后再试!");
        }
    }
);

//请求并导出
export function request(data: any) {
    return new Promise((resolve, reject) => {
        const promise = axios(data);
        //处理返回
        promise
            .then((res: any) => {
                resolve(res.data);
            })
            .catch((err: any) => {
                reject(err.data);
            });
    });
}

同级包下 新建状态码文件 status.ts

export const showMessage = (status: number | string): string => {
    let message: string = "";
    switch (status) {
        case 400:
            message = "请求错误(400)";
            break;
        case 401:
            message = "未授权,请重新登录(401)";
            break;
        case 403:
            message = "拒绝访问(403)";
            break;
        case 404:
            message = "请求出错(404)";
            break;
        case 408:
            message = "请求超时(408)";
            break;
        case 500:
            message = "服务器错误(500)";
            break;
        case 501:
            message = "服务未实现(501)";
            break;
        case 502:
            message = "网络错误(502)";
            break;
        case 503:
            message = "服务不可用(503)";
            break;
        case 504:
            message = "网络超时(504)";
            break;
        case 505:
            message = "HTTP版本不受支持(505)";
            break;
        default:
            message = `连接出错(${status})!`;
    }
    return `${message},请检查网络或联系管理员!`;
};

配置代理

注意放置位置

const proxy = {
  '/dev-api': {
    target: 'http://localhost:80', // 实际请求地址
    changeOrigin: true,
    rewrite: (path) => path.replace(/^/dev-api/, ''),
  },
};

 server: {
    proxy,
    host: 'localhost',
    port: 80,
    open: true,
  },

本次案例使用 api下创建login.ts文件 (login名称未修改)

请求名称未修改

import { request } from "../utils/request";

export function login(data: any) {
    return request({
        url: "/system/encipher",
        method: "get",
        data,
    });
}

export function list(params: any) {
    return request({
        url: "/system/encipher/",
        method: "get",
        params,
    });
}

在对应vue中 点击事件中使用

const onRootClick =   () => {
  var data = localStorage.getItem("datalist");
  var item = JSON.parse(data);
  var clinetIds;
  for (const itemElement of item) {
    if(itemElement.name==props.name){
      clinetIds = itemElement.clientId
    }
  }
  
  var userName = localStorage.getItem("username");
  list({userName: userName, clientId: clinetIds}).then((res: any) => {

   //执行后续
  }).catch(() =>{
    alert("请求错误")
  })
};

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

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

相关文章

Java安全—SpringBootActuator监控泄露Swagger自动化

前言 今天依旧是SpringBoot框架,估计还要一篇文章才能把它写完,没办法,Java安全的内容太多了。 Actuator SpringBoot Actuator模块提供了生产级别的功能,比如健康检查,审计,指标收集,HTTP跟踪…

质数的和与积

质数的和与积 C语言代码C 代码Java代码Python代码 💐The Begin💐点点关注,收藏不迷路💐 两个质数的和是S,它们的积最大是多少? 输入 一个不大于10000的正整数S,为两个质数的和。 输出 一个整…

如何用VScode恢复误删文件-linux

如果你用vscode远程在服务器上办公,有一天你用了: rm -rf *然后你发现你的文件不见了,不要着急。 这种方法只适用于不多的几个文件。 这个时候你要做的是,查看右侧的1: 从1里面查找你删除的文件,然后点…

Linux文件操作基础

1.引入 在Linux第一章提到过, 在Linux中,一切皆文件,而文件由文件内容和文件属性组成,在C语言中可以 使用相应的接口打开文件,例如 fopen 函数 文件最开始在磁盘中,但是因为磁盘的速度远低于CPU的执行速度…

如何在 MacOS 上安装 Flutter ?

Flutter 是 Google 开发的一个功能强大的框架,它允许开发人员从单个代码库构建高质量的、本机编译的移动、web 和桌面应用程序。如果你是初次接触 Flutter,并希望在你的 macOS 系统上安装它,本指南将引导你一步一步地完成这个过程。 Step 1:…

【2025最新计算机毕业设计】基于SpringBoot+Vue社区医院挂号健康服务平台【提供源码+答辩PPT+文档+项目部署】

作者简介:✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容:🌟Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…

Docker安装MySQL5.5版本数据库(图文教程)

本章教程,介绍如何使用Docker安装MySQL低版本5.5版本的数据库。 一、拉取镜像 docker pull mysql:5.5二、启动容器 docker run -d --name mysql5.5 --restart=always

可视化建模与UML《部署图实验报告》

一、实验目的: 1、熟悉部署图的基本功能和使用方法。 2、掌握使用建模工具软件绘制部署图的方法 二、实验环境: window11 EA15 三、实验内容: 根据以下的描述,绘制部署图。 网上选课系统在服务器端使用了两台主机,一…

Python的3D可视化库【vedo】2-3 (plotter模块) 增删物体、控制相机

文章目录 4 Plotter类的方法4.3 渲染器内的物体操作4.3.1 添加物体4.3.2 移除物体4.3.3 渲染器的内容列表 4.4 相机控制4.4.1 访问相机对象4.4.2 重置相机状态4.4.3 移动相机位置4.4.4 改变相机焦点4.4.5 改变相机朝向的平面4.4.5 旋转相机4.4.6 对齐相机的上朝向4.4.7 缩放 pl…

07篇(附)--仿射变换矩阵

此篇献给某些 头铁 的小只因们,认真钻研下面的数学式吧 原理示例 首先我们以最简单的一个点的旋转为例子,且以最简单的情况举例,令旋转中心为坐标系中心O(0,0),假设有一点P0(x0,y0)&#xff0…

Unity屏幕截图、区域截图、读取图片、WebGL长截屏并下载到本地jpg

Unity屏幕截图、区域截图、读取图片、WebGL长截屏并下载到本地jpg 一、全屏截图并保存到StreamingAssets路径下 Texture2D screenShot;//保存截取的纹理public Image image; //显示截屏的Imagepublic void Jietu(){StartCoroutine(ScrrenCapture(new Rect(0, 0, Screen.width…

【2025最新计算机毕业设计】基于SprintBoot+Vue乡村振兴民宿管理系统【提供源码+答辩PPT+文档+项目部署】

作者简介:✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容:🌟Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…

在Docker中运行MySQL的思考:挑战与解决方案

引言 在云计算和容器化技术日益普及的今天,Docker作为一种轻量级的容器化平台,已经成为开发和部署应用的首选工具之一。其提供的便携性、可扩展性和环境一致性对于无状态微服务来说无疑是巨大的福音。然而,并非所有应用都适合在Docker容器中…

【Linux网络】网络基础:传输层TCP协议(二)

📝个人主页🌹:Eternity._ ⏩收录专栏⏪:Linux “ 登神长阶 ” 🌹🌹期待您的关注 🌹🌹 ❀ 传输层UDP/TCP协议 确认应答机制超时重传机制连接管理机制理解 TIME_WAIT 状态 滑动窗口流量…

virtualbox 搭建ubuntu

环境:VirtualBox-6.1.32 1、下载安装virtualbox 略 2、新建ubuntu 3、配置ubuntu 选择虚拟盘 4、安装ubuntu 5、安装ssh sudo apt install openssh-server openssh-client 查看ip 6、安装samba sudo apt install samba 查看ssh启动状态 sudo systemctl stat…

智能人体安全防护:3D 视觉技术原理、系统架构与代码实现剖析

随着工业化程度的提高,生产安全已成为企业关注的重点。尤其是在一些存在禁区的工业厂区和车间,人员误入或违规进入将带来严重的安全隐患。为了解决这一问题,迈尔微视推出了智能人体安全检测解决方案,为企业提供全方位的人员安全监…

Javaweb web后端maven介绍作用安装

自动导入到这个项目 src是源代码 main主程序,核心代码 java是Java源代码 resources是项目配置文件 test测试相关的 maven概述 介绍 依赖在本地仓库查找,如果本地仓库有,用本地仓库的依赖,本地没有,连接中央仓库&…

独家原创 | CEEMDAN-CNN-GRU-GlobalAttention + XGBoost组合预测

往期精彩内容: 时序预测:LSTM、ARIMA、Holt-Winters、SARIMA模型的分析与比较 全是干货 | 数据集、学习资料、建模资源分享! EMD变体分解效果最好算法——CEEMDAN(五)-CSDN博客 拒绝信息泄露!VMD滚动分…

网络基础概念

协议 协议在我的理解看来其实就是为了让全部计算机做通信而设计出来的一种约定 计算机之间的传输媒介是光信号和电信号. 通过 "频率" 和 "强弱" 来表示 0 和 1 这样的信息. 要想传递各种不同的信息, 就需要约定好双方的数据格式 而制定协议这件事情并不是…

向量数据库Faiss C++

目录 1. Faiss简介2. FAISS 的主要特点2.1 高效性2.2 支持多种索引类型2.3 灵活性2.4 GPU 加速2.5 易于集成 3. 应用场景4. 安装4.1 安装依赖4.2 编译源码4.2.1 下载Faiss源码4.2.2 编译 5. Demo5.1 代码5.2 编译5.3 运行 1. Faiss简介 FAISS(Facebook AI Similari…