vue3 学习笔记04 -- axios的使用及封装

vue3 学习笔记04 – axios的使用及封装

  • 安装 Axios 和 TypeScript 类型定义
npm install axios
npm install -D @types/axios

创建一个 Axios 实例并封装成一个可复用的模块,这样可以在整个应用中轻松地进行 API 请求管理。

  • 在 src 目录下创建一个 services 文件夹,并在其中创建 api.ts 文件:
  // src/services/api.tsimport axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';// 创建一个 axios 实例
const api: AxiosInstance = axios.create({baseURL: import.meta.env.VITE_APP_BASE_API,timeout: 30000, // 请求超时时间headers: {'Content-Type': 'application/json'// 其他默认请求头可以在这里配置}
});// 请求拦截器
api.interceptors.request.use((config: AxiosRequestConfig) => {// 在请求发送之前做些什么,例如加入 token 等操作return config;},(error) => {// 处理请求错误return Promise.reject(error);}
);// 响应拦截器
api.interceptors.response.use((response: AxiosResponse) => {// 在响应数据返回之前做些什么,例如对响应数据进行处理return response.data;},(error) => {// 处理响应错误return Promise.reject(error);}
);export default api;
  • 项目根目录新建.env.dev – 开发环境变量
NODE_ENV = 'development'
VITE_APP_BASE_API = '/api'
VITE_APP_TARGET_URL = "https://api.example.com"
  • 项目根目录新建.env.pro – 生产环境变量
NODE_ENV = 'production'
VITE_APP_BASE_API = '/api'
VITE_APP_TARGET_URL = "https://api.example.com"
  • vite.config.ts中配置proxy
export default defineConfig({plugins: [vue()],server:{host: '0.0.0.0', // 允许IP访问proxy: {[env.VITE_APP_BASE_API]: {changeOrigin: true,target: env.VITE_APP_TARGET_URL,secure: false,rewrite: (path) => path.replace(new RegExp(`^${env.VITE_APP_BASE_API}`), '')},}}
})
  • 使用axios封装

    • 在src/api文件下新建login/login.ts文件
          import api from '@/services/api';import { AxiosPromise } from "axios";import { LoginData, LoginResult } from "./types";export function login(data:LoginData):AxiosPromise<LoginResult> {return api({url: '/mock/user/login',method: 'post',data})}
      
    • src/login/types.ts
          export interface LoginData {/*** 用户名*/username: string;/*** 密码*/password: string;}export interface userInfoVo {id: numbername: stringphone: number}/*** 登录响应*/export interface LoginResult {/*** token*/token?: string;/*** 过期时间(单位:毫秒)*/expireAt?: number;/*** 刷新token*/refreshToken?: string;/*** 用户信息*/userInfo?: userInfoVo[];}
      
  • vue文件中使用

<template>form表单.....
<el-button class="login-button" type="primary" @click="handleLogin" :loading="loading">登录</el-button>
</template> 
<script setup lang="ts">
import { login } from '@/api/login/login'
import { useRouter } from 'vue-router'
let loading = ref(false)
const router = useRouter()
const handleLogin = ()=>{let data = {username:'xxx',password:'xxx'}loading.value = truelogin(data).then((res)=>{loading.value = false// 一些存储token及其他信息的处理的处理....要干的事router.push('/')})
}
</script>  

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

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

相关文章

关于锂电池的充电过程

锂电池的充电阶段大概可以分为四个阶段&#xff1a;涓流充电、恒流充电、恒压充电以及充电终止。 涓流充电&#xff1a;这是充电过程的第一阶段&#xff0c;主要用于对完全放电的电池单元进行预充&#xff08;恢复性充电&#xff09;。当电池电压低于大概3V时&#xff0c;采用最…

【学习css1】flex布局-页面footer部分保持在网页底部

中间内容高度不够屏幕高度撑不开的页面时候&#xff0c;页面footer部分都能保持在网页页脚&#xff08;最底部&#xff09;的方法 1、首先上图看显示效果 2、奉上源码 2.1、html部分 <body><header>头部</header><main>主区域</main><foot…

PaintsUndo - 一张照片一键生成绘画过程视频 本地一键整合包下载

这就是ControlNet作者张吕敏大佬的新作&#xff0c;PaintsUndo。只要你有一张图片&#xff0c;PaintsUndo 就能让它变成完整的绘画过程视频。这科技&#xff0c;绝了。 你有没有想过&#xff0c;一张静态图片也能变成一个绘画教程? PaintsUndo 就是这么神奇。你只需要提供一…

通过手机供网、可修改WIFI_MAC的网络设备

一、修改WIFI mac&#xff08;bssid&#xff09; 取一根网线&#xff0c;一头连着设备黄色网口、一头连着电脑按住设备reset按键&#xff0c;插入电源线&#xff0c;观察到蓝灯闪烁后再松开reset按键 打开电脑浏览器&#xff0c;进入192.168.1.1&#xff0c;选择“MAC 地址修改…

【Spring Boot】Spring原理:Bean的作用域和生命周期

目录 Spring原理一. 知识回顾1.1 回顾Spring IOC1.2 回顾Spring DI1.3 回顾如何获取对象 二. Bean的作用域三. Bean的生命周期 Spring原理 一. 知识回顾 在之前IOC/DI的学习中我们也用到了Bean对象&#xff0c;现在先来回顾一下IOC/DI的知识吧&#xff01; 首先Spring IOC&am…

可视化学习:如何用WebGL绘制3D物体

在之前的文章中&#xff0c;我们使用WebGL绘制了很多二维的图形和图像&#xff0c;在学习2D绘图的时候&#xff0c;我们提过很多次关于GPU的高效渲染&#xff0c;但是2D图形的绘制只展示了WebGL部分的能力&#xff0c;WebGL更强大的地方在于&#xff0c;它可以绘制各种3D图形&a…

C语言之数据在内存中的存储(2),浮点数在内存中的存储

目录 前言 一、引例 二、浮点型在内存中的存储 三、浮点数在内存中的存和取过程 1.浮点数的存储过程 2.浮点数的取过程 四、引例解析 总结 前言 想知道浮点数在内存中是如何存储的吗&#xff0c;本文就告诉你答案&#xff0c;虽然一般情况题目还是面试涉及到浮点数在内…

新华三H3CNE网络工程师认证—ACL使用场景

ACL主要用于实现流量的过滤&#xff0c;业务中网络的需求不止局限于能够连同。 一、过略工具 你的公司当中有研发部门&#xff0c;包括有财务部门&#xff0c;财务部门的访问是要做到控制的&#xff0c;防止被攻击。 这种的过滤方法为&#xff0c;在设备侧可以基于访问需求来…

解决IntelliJ IDEA连接MySQL时“Public Key Retrieval is not Allowed”问题

前言 在使用IntelliJ IDEA开发环境中连接MySQL数据库时&#xff0c;可能会遇到“Public Key Retrieval is not allowed”这样的错误提示&#xff0c;即使输入的用户名和密码完全正确。本文将指导你如何解决这一问题&#xff0c;确保顺利建立数据库连接。 错误背景 这一问题通…

AI算力发展现状与趋势分析

综合算力发展现状与趋势分析 在数字经济的疾速推动下&#xff0c;综合算力作为驱动各类应用和服务的新型生产力&#xff0c;其价值日益凸显。我们深入探讨了综合算力的定义、重要性以及当前发展状况&#xff1b;并从算力形态、运力性能和存储技术等角度&#xff0c;预见了其发展…

基于Java技术的校友社交系统

你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果你对校友社交系统感兴趣或者有相关需求&#xff0c;可以私信联系我。 开发语言 Java 数据库 MySQL 技术 Java技术SpringBoot框架 工具 IDEA/Eclipse、Navicat、Maven 系统展示 首页 校友会信息界面 校友活动…

Sqli-labs 3

1.按照路径http://localhost/sqli-labs/sqli-labs-master/Less-3/进入 2.判断注入类型----字符型 Payload&#xff1a;?id1’) and 11-- 注&#xff1a;根据报错提示的语法错误&#xff0c;在第一行中使用接近’union select 1,2,3--’)的正确语法 3.判断注入点&#xff1a;…

【Linux】vim详解

1.什么是vi/vim? 简单来说&#xff0c;vi是老式的文本编辑器&#xff0c;不过功能已经很齐全了&#xff0c;但是还是有可以进步的地方。vim则可以说是程序开发者的一项很好用的工具&#xff0c;就连 vim的官方网站&#xff08; http://www.vim.org&#xff09;自己也说vim是一…

如何计算卷积层输出图像的大小以及池化大小输出

如何计算卷积层输出图像的大小&以及池化大小输出 卷积 在卷积神经网络&#xff08;CNN&#xff09;中&#xff0c;计算卷积层输出图像的大小是一个常见的操作。以下是卷积计算的基本公式和步骤&#xff1a; 卷积层输出尺寸计算公式&#xff1a; Output_size ⌊ Input_s…

区块链项目全球成功指南:全面覆盖的媒体宣发策略与实践

随着区块链技术的迅速普及和发展&#xff0c;全球范围内对区块链项目的关注度不断提升。为了在国际市场上取得成功&#xff0c;区块链项目需要通过有效的媒体宣传策略来提高知名度&#xff0c;吸引投资&#xff0c;并建立强大的社区支持。本文将详细介绍区块链项目在海外媒体宣…

为企业提升销售工作效率的工作手机管理系统

在竞争日益激烈的市场环境中&#xff0c;企业的销售团队如同前线战士&#xff0c;其作战效率直接关乎企业的生存与发展。然而&#xff0c;传统销售管理模式下的信息孤岛、沟通不畅、数据混乱等问题&#xff0c;正悄然成为制约销售效率提升的瓶颈。今天&#xff0c;我们为您揭秘…

在 Windows 平台搭建 MQTT 服务

引言 MQTT 是一种轻量级、基于发布/订阅模式的消息传输协议&#xff0c;旨在用极小的代码空间和网络带宽为物联网设备提供简单、可靠的消息传递服务。MQTT 经过多年的发展&#xff0c;如今已被广泛应用于资源开采、工业制造、移动通信、智能汽车等各行各业&#xff0c;使得 MQ…

汇聚荣做拼多多电商怎么样?

汇聚荣做拼多多电商怎么样?在当前电商平台竞争激烈的背景下&#xff0c;拼多多凭借其独特的商业模式和市场定位迅速崛起。对于想要加入拼多多的商家而言&#xff0c;了解平台的特点、优势及挑战是至关重要的。本文将深入分析加入拼多多电商的多个方面&#xff0c;帮助读者全面…

ubuntu计划任务反弹

目录 实验环境 实验步骤 目标主机构造任务计划 构造语句 语句解释 kali开启监听 监听成功 问题 原因 实验环境 攻击者 操作系统&#xff1a;kali IP&#xff1a;192.168.244.141 目标主机 操作系统&#xff1a;ubuntu IP&#xff1a;192.168.244.151 实验步骤 目…

论文学习_An Empirical Study of Deep Learning Models for Vulnerability Detection

1. 引言 研究背景:近年来,深度学习漏洞检测工具取得了可喜的成果。最先进的模型报告了 0.9 的 F1 分数,并且优于静态分析器。结果令人兴奋,因为深度学习可能会给软件保障带来革命性的变化。因此,IBM、谷歌和亚马逊等行业公司非常感兴趣,并投入巨资开发此类工具和数据集。…