vue3 封装aixos

news2024/11/5 14:59:04

图片

1. Vue3 封装 aixos 并且 使用 aixos  请求数据

npm install axios
# 或者
yarn add axios

2. Vue3 封装 aixos 并且 使用 aixos  请求数据

封装 axios可以帮助我们更好地管理 HTTP 请求,例如添加统一的基础URL请求头拦截器等功能。

下面是封装 axios的一个示例,以及如何在 Vite 项目中使用它来请求数据。

1.1. 创建 Axios 实例

首先,创建一个新的 JavaScript 文件,比如 http.jsaxiosInstance.js,并在其中配置 Axios 实例:

// src/http.js

import axios from 'axios';

// 创建一个新的 axios 实例
const service = axios.create({
  baseURL: 'https://api.example.com', // 设置基础 URL
  timeout: 5000, // 设置超时时间
  headers: { 'Content-Type': 'application/json' } //设置默认的Content-Type
});

// 添加请求拦截器
service.interceptors.request.use(
  config => {
    // 在这里可以设置请求头、请求参数等return config
    // 例如添加 token 到请求头
    const token = localStorage.getItem('token'); // 示例:从本地存储获取 token
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    console.log(error)
    return Promise.reject(error);
  }
);

// 添加响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    // return response.data; // 返回实际的数据而不是整个响应对象
    // 在这里处理返回数据
    const { data } = response
    if (data.code !== 200) {
      // 对响应code做点什么
      if (data.code === 401) {
        // 处理未授权的情况
        // 可能需要重定向到登录页面或者其他操作
      }
      console.error('Error:', data.message)
      return Promise.reject(newError(data.message || 'Error'))
    } else {
      return data
    }
  },
  error => {
    console.log(error)
    return Promise.reject(error);
  }
);

export const get = (url, params) => {
  return service.get(url, { params });
};

export const post = (url, data) => {
  return service.post(url, data);
};

export const put = (url, data) => {
  return service.put(url, data);
};

export const delete= (url, data) => {
  return service.delete(url, data);
};

export default service;

1.2. 使用封装后的 Axios

接下来,在你的 Vue 组件或其他地方使用这个封装好的 Axios 实例:

// src/views/MyComponent.vue

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <pre>{{ data }}</pre>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import service from '@/http'; // 引入封装好的 axios 实例

const data = ref('');
async function fetchData() {
  try {
    const response = await axiosInstance.get('/endpoint'); // 替换为你的 API 端点
    data.value = response;
  } catch (error) {
    console.error("Failed to fetch data:", error);
  }
}
</script>

在这个例子中,我们在 MyComponent.vue 中定义了一个按钮,点击后会触发 fetchData 方法,该方法通过封装好的 Axios 实例发起请求,并将返回的数据展示出来。

1.3. 注意事项

  • 确保在 Vue 项目中正确配置了路径别名或相对路径,以便正确导入封装好的 Axios 实例。
    vue3使用vite设置 @ 路径别名指向src 目录_vue项目设置src别名 vite-CSDN博客

  • 根据实际的需求调整 Axios 的配置和拦截器逻辑。

  • 如果你在生产环境中遇到跨域问题,请确保服务器设置了正确的 CORS 头。

通过这种方式,你可以方便地管理和复用 HTTP 请求代码,并且可以根据需要轻松地添加额外的功能,如身份验证和错误处理。

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

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

相关文章

在美团外卖上抢券 Python来实现

在美团外卖上抢券的 Python 实现 在如今的互联网时代&#xff0c;自动化脚本已经成为了许多用户生活中不可或缺的工具。尤其是在购物、抢券等场景中&#xff0c;自动化脚本能够帮助我们节省大量的时间和精力。今天&#xff0c;我们将一起探索如何使用 Python 编写一个简单的脚…

【学术论文投稿】探索嵌入式硬件设计:揭秘智能设备的心脏

【IEEE出版】第六届国际科技创新学术交流大会暨通信、信息系统与软件工程学术会议&#xff08;CISSE 2024&#xff09;_艾思科蓝_学术一站式服务平台 更多学术会议论文投稿请看&#xff1a;https://ais.cn/u/nuyAF3 目录 引言 嵌入式系统简介 嵌入式硬件设计的组成部分 设…

宝藏虚拟化学习资料大全

最近发现了关于虚拟化的宝藏资料&#xff0c;瑞斯拜&#xff01;原文链接如下&#xff1a; 500篇关于虚拟化的经典资料&#xff0c;含CPU虚拟化&#xff0c;磁盘虚拟化&#xff0c;内存虚拟化&#xff0c;IO虚拟化。 目录 &#x1fa90; 虚拟化基础 &#x1f343; 虚拟化分类&…

qt QStatusBar详解

1、概述 QStatusBar是Qt框架提供的一个小部件&#xff0c;用于在应用程序窗口底部显示状态信息。它可以显示一些固定的文本和图标&#xff0c;并且可以通过API动态更新显示内容。QStatusBar通常是一个水平的窗口部件&#xff0c;能够显示多行文本内容&#xff0c;非常适合用于…

即插即用显著位置注意力spab,涨点起飞

题目&#xff1a;Salient Positions based Attention Network for Image Classification 论文地址&#xff1a;https://arxiv.org/pdf/2106.04996 创新点 提出了基于显著位置的注意力机制&#xff1a;论文提出了一种名为SPAblock的显著位置选择算法(SPS)&#xff0c;通过在注…

R语言贝叶斯:INLA下的贝叶斯回归、生存分析、随机游走、广义可加模型、极端数据的贝叶斯分析

原文链接&#xff1a;R语言贝叶斯&#xff1a;INLA下的贝叶斯回归、生存分析、随机游走、广义可加模型、极端数据的贝叶斯分析https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247625527&idx8&snba4e50376befd94022519152609ee8d0&chksmfa8daad0cdfa23c6…

C++设计模式结构型模式———外观模式

文章目录 一、引言二、外观模式三、总结 一、引言 外观模式是一种结构型设计模式&#xff0c; 能为程序库、 框架或其他复杂类提供一个简单的接口。也就是说&#xff0c;该模式的目的用于隔离接口&#xff0c;换句话说&#xff0c;就是扮演中间层的角色&#xff0c;把本来结合…

物流公司出货单据模板下载软件 佳易王物流单管理系统操作使用教程

一、概述 【软件资源文件下载可以点文章最后信息卡片】 物流公司出货单据模板下载软件物流单管理系统操作使用教程 ‌软件功能‌&#xff1a; ‌记录管理‌&#xff1a;记录运费、垫付货款、代收货款、保险费等。‌打印模式‌&#xff1a;支持空白单、卷纸、印刷好的单子等多…

谷粒商城のsentinelzipkin

文章目录 前言一、Sentinel1、什么是Sentinel2、项目配置3、使用案例3.1、流控3.2、降级3.3、黑白名单设置 二、Zipkin1、什么是Zipkin2、项目配置3、整合案例 前言 本篇介绍Spring Cloud Ali的sentinel组件&#xff0c;用于对微服务的熔断降级&#xff0c;以及链路追踪zipkin的…

WPF+MVVM案例实战(十九)- 自定义字体图标按钮的封装与实现(EF类)

文章目录 1、案例效果1、按钮分类2、E类按钮功能实现与封装1.文件创建与代码实现2、样式引用与封装 3、F类按钮功能实现与封装1、文件创建与代码实现2、样式引用与封装 3、按钮案例演示1、页面实现与文件创建2、运行效果如下 4、源代码获取 1、案例效果 1、按钮分类 在WPF开发…

keepalived + nginx 实现网站高可用性(HA)

keepalive 一、keepalive简介二、实现步骤1. 环境准备2. 安装 Keepalived3. 配置 Keepalived 双机主备集群架构4. 配置 Nginx5. 启动Keepalived6. 测试高可用性7. 配置keepalived 双主热备集群架构 一、keepalive简介 目前互联网主流的实现WEB网站及数据库服务高可用软件包括&a…

破局智能制造:难点分析与对策

一、 智能制造过程中可能遇到难点: 1. --概念和技术繁多--: - 智能制造领域涉及众多概念和技术,如工业4.0、CPS、工业互联网等,让企业难以选择和应用。 2. --缺乏经验和成功案例--: - 企业在推进智能制造时缺乏经验,存在信息孤岛、自动化孤岛等问题,缺乏统一规划和系统推…

中汽测评观察 亲子出行健康为先,汽车健康用材成重要考量

在中国&#xff0c;亲子出行是驾车的主要场景之一。汽车不仅仅是一种便捷的交通工具&#xff0c;更是生活中的移动“第三空间”。在此背景下&#xff0c;汽车健康用材不仅是消费者关注的焦点问题&#xff0c;也成为汽车企业发力的重要方向。 对消费者而言&#xff0c;在家庭亲子…

阿里巴巴Seata分布式事务解决方案

Seata是什么 Seata是一款开源的分布式事务解决方案&#xff0c;致力于在微服务架构下提供高性能和简单易用的分布式事务服务。 当开发框架为spring boot或者SSM&#xff0c;都可以使用Seata进行开发。 分布式事务是什么 在大型架构中&#xff0c;一般会把一个应用系统&#x…

Cuebric:用AI重新定义3D创作的未来

一、简介 Cuebric 是一家成立于2022年夏天的好莱坞创新公司,致力于为电影、电视、游戏和时尚等行业提供先进的AI多模态SaaS平台。自2024年1月正式推出以来,Cuebric 已经在市场上获得了广泛的认可和积极的反馈。目前,该平台正处于1.0版本的beta测试阶段,已募集约50万美元的…

【Spring IoCDI】IoC容器,IoC注解,Bean的使用

【Spring核心思想:IoC】 spring是一个开源框架&#xff0c;支持广泛的应用场景&#xff0c;简而言之:Spring是包含了众多工具方法的IoC容器 【IoC】 IoC的意思是「控制反转」&#xff0c;也就是说Spring是一个“控制反转”的容器 通用程序的实现代码&#xff0c;类的创建顺序…

Android笔记(三十一):Deeplink失效问题

背景 通过deeplink启动应用之后&#xff0c;没关闭应用的情况下&#xff0c;再次使用deeplink会失效的问题&#xff0c;是系统bug导致的。此bug仅在某些设备&#xff08;Nexus 5X&#xff09;上重现&#xff0c;launchMode并且仅当应用程序最初通过深层链接启动并再次通过深层…

深入理解Transformer中的位置编码

1 位置编码的作用 由于注意力的作用机制&#xff0c;不论输入序列的顺序如何&#xff0c;输出结果都是一样的。 也就是丢失了位置信息。 但是对于语言模型&#xff0c; 我们都知道顺序是很重要的&#xff0c; 所以需要对输入序列额外注入位置信息。 2 位置编码方式 Transfor…

Ansible 部署应用

Ansible Ansible 是基于 Python 开发&#xff0c;集合了众多优秀运维工具的优点&#xff0c;实现了批量运行命令、部署程序、配置系统等功能的自动化运维管理工具。默认通过 SSH 协议进行远程命令执行或下发配置&#xff0c;无需部署任何客户端代理软件&#xff0c;从而使得自动…

根据问题现象、用户操作场景及日志打印去排查C++软件问题,必要时尝试去复现问题

目录 1、概述 2、通过现有信息无法定位问题时&#xff0c;则需要尝试去复现问题 3、非崩溃问题与崩溃问题的一般排查思路 3.1、非崩溃问题的排查思路 3.2、崩溃问题的排查思路 4、难以复现问题的可能原因总结 4.1、问题难以复现&#xff0c;可能和某种特殊的业务场景或操…