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[];}
- 在src/api文件下新建login/login.ts文件
-
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>
相关文章:
vue3 学习笔记04 -- axios的使用及封装
vue3 学习笔记04 – axios的使用及封装 安装 Axios 和 TypeScript 类型定义 npm install axios npm install -D types/axios创建一个 Axios 实例并封装成一个可复用的模块,这样可以在整个应用中轻松地进行 API 请求管理。 在 src 目录下创建一个 services 文件夹&…...
键盘快捷键设置录入
效果图: 代码: import React, {useContext, useEffect, useRef} from react import {message} from "antd"; import lodash from "lodash"; import {StateContext} from ../../index.tsx import {useUpdateEffect} from "ahoo…...
刷题Day49|647. 回文子串、516.最长回文子序列
647. 回文子串 647. 回文子串 - 力扣(LeetCode) 思路:递推公式的含义是[i, j]内的子串是否为回文子串(bolean[][])。一共两种情况:s[i] s[j],i和j相差1以外就得判断中间包含的的字符串是否为回文了&…...
关于transformers库验证时不进入compute_metrics方法的一些坑
生成式任务输入就是标签 transformers在进入compute_metrics前会有一个判断,源码如下: # 版本 transformers4.41.2 # 在trainer.py 的 3842 行 # Metrics! if (self.compute_metrics is not Noneand all_preds is not Noneand all_labels is not Nonea…...
苹果提出RLAIF:轻量级语言模型编写代码
获取本文论文原文PDF,请在公众号【AI论文解读】留言:论文解读 代码生成一直是一个充满挑战的领域。随着大型语言模型(LLM)的出现,我们见证了在自然语言理解和生成方面的显著进步。然而,当涉及到代码生成&a…...
[leetcode] shortest-subarray-with-sum-at-least-k 和至少为 K 的最短子数组
. - 力扣(LeetCode) class Solution { public:int shortestSubarray(vector<int>& nums, int k) {int n nums.size();vector<long> preSumArr(n 1);for (int i 0; i < n; i) {preSumArr[i 1] preSumArr[i] nums[i];}int res n…...
专业140+总分420+天津大学815信号与系统考研经验天大电子信息与通信工程,真题,大纲,参考书。
顺利上岸天津大学,专业课815信号与系统140,总分420,总结一些自己的复习经历,希望对于报考天大的同学有些许帮助,少走弯路,顺利上岸。专业课: 815信号与系统:指定教材吴大正…...
前端如何取消接口调用
🧑💻 写在开头 点赞 收藏 学会🤣🤣🤣 1. xmlHttpRequest是如何取消请求的? 实例化的XMLHttpRequest对象上也有abort方法 const xhr new XMLHttpRequest(); xhr.addEventListener(load, function(e)…...
k8s 容器环境下的镜像如何转换为docker 使用
在无法连接registry 的环境中,想要把 crictl 中的镜像给docker 使用,应该怎么处理? 其实容器镜像是通用的,crictl 和ctr 以及docker 镜像是可以互相使用的,因为docker 在1.10版本之后遵从了OCI。所以crictl 环境下的镜…...
FreeRTOS 队列
队列是一种任务到任务、任务到中断、中断到任务数据交流的一种机制。在队列中可以存 储数量有限、大小固定的多个数据,队列中的每一个数据叫做队列项目,队列能够存储队列项 目的最大数量称为队列的长度,在创建队列的时候,就需要指…...
如何识别图片文字转化为文本?5个软件帮助你快速提取图片文字
如何识别图片文字转化为文本?5个软件帮助你快速提取图片文字 将图片中的文字提取为文本是一项非常有用的技能,特别是当你需要处理大量扫描文档、截图或其他图片时。以下是五款能够帮助你快速提取图片文字的软件: 迅捷文字识别 这是一款非…...
Flink SQL kafka连接器
版本说明 Flink和kafka的版本号有一定的匹配关系,操作成功的版本: Flink1.17.1kafka_2.12-3.3.1 添加kafka连接器依赖 将flink-sql-connector-kafka-1.17.1.jar上传到flink的lib目录下 下载flink-sql-connector-kafka连接器jar包 https://mvnreposi…...
glm-4 联网搜索 api 测试
今天测试了一下 glm-4 的联网搜索 web_search tool 调用,发现了 web_search 的网页检索返回结果中几个比较诡异的事情,特此记录: 有些检索结果没有 icon、link、media 字段,但从内容上看确实是联网搜索出来的结果,不知…...
Java毕业设计 基于SSM vue图书管理系统小程序 微信小程序
Java毕业设计 基于SSM vue图书管理系统小程序 微信小程序 SSM 图书管理系统小程序 功能介绍 用户 登录 注册 首页 图片轮播 图书信息推荐 图书详情 赞 踩 评论 收藏 系统公告 公告详情 用户信息修改 我的待还 图书归还 催还提醒 我的收藏管理 意见反馈 管理员 登录 个人中心…...
bert训练的一些技巧(rand() < self.skipgram_prb)
rand() < self.skip_gram_prb) 是一个条件表达式,用来判断是否进行skip-gram掩码操作。这种掩码操作通常用于自然语言处理中的数据增强,通过概率决定是否应用skip-gram掩码。下面是对这个表达式的详细解释: 解释 rand(): rand() 是一个随…...
pandas修改时间索引报错处理
import pandas as pd import numpy as np import osdfpd.DataFrame(index[a,b,c],data{序列:[1,2,3]}) df.rename(index{a:a1},inplaceTrue) print(df) print(df.index.dtype)df1pd.DataFrame(index[2024-01-01,2024-01-02,2024-01-03],data{序列:[1,2,3]}) df1.rename(index{2…...
Nginx Bla~Bla~
root 和 alias指令都用于指定服务器上的文件系统路径,但它们在用法和行为上有一些不同 root指令通常用于在Nginx配置中定义一个目录,该目录将作为请求的根目录。 server { location /static/ {root /var/www; 请求 /static/index.html 将映射到 /v…...
java awt和swing介绍
Java AWT(Abstract Window Toolkit)和 Swing 是用于创建图形用户界面(GUI)的 Java API。 AWT AWT 是 Java 最初的平台依赖的窗口图形界面工具包,它提供了一组基本的 GUI 组件、窗口管理、事件处理等。AWT 组件是重量…...
奇怪的错误记录
https://github.com/meta-llama/llama3/issues/80 读模型没问题,推理时出现: RuntimeError: “triu_tril_cuda_template” not implemented for ‘BFloat16’ ———————————————— 事发原因 我尝试了解transformers的AutoProcessor时&a…...
来啦,经典传说大变身牛郎织女后代逗趣日常
《落凡尘:星宿大冒险》来啦! 经典传说大变身,牛郎织女后代金风, 上演一出“星际小侦探”的逗趣日常! 想象一下,二十八星宿那些傲娇的星星们, 居然能“离家出走”,还差点把天给掀了…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架,支持"一次开发,多端部署",可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务,为旅游应用带来…...
大语言模型如何处理长文本?常用文本分割技术详解
为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...
第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词
Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵,其中每行,每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid,其中有多少个 3 3 的 “幻方” 子矩阵&am…...
网络编程(UDP编程)
思维导图 UDP基础编程(单播) 1.流程图 服务器:短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
代码规范和架构【立芯理论一】(2025.06.08)
1、代码规范的目标 代码简洁精炼、美观,可持续性好高效率高复用,可移植性好高内聚,低耦合没有冗余规范性,代码有规可循,可以看出自己当时的思考过程特殊排版,特殊语法,特殊指令,必须…...
Python 实现 Web 静态服务器(HTTP 协议)
目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1)下载安装包2)配置环境变量3)安装镜像4)node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1)使用 http-server2)详解 …...
【1】跨越技术栈鸿沟:字节跳动开源TRAE AI编程IDE的实战体验
2024年初,人工智能编程工具领域发生了一次静默的变革。当字节跳动宣布退出其TRAE项目(一款融合大型语言模型能力的云端AI编程IDE)时,技术社区曾短暂叹息。然而这一退场并非终点——通过开源社区的接力,TRAE在WayToAGI等…...
shell脚本质数判断
shell脚本质数判断 shell输入一个正整数,判断是否为质数(素数)shell求1-100内的质数shell求给定数组输出其中的质数 shell输入一个正整数,判断是否为质数(素数) 思路: 1:1 2:1 2 3:1 2 3 4:1 2 3 4 5:1 2 3 4 5-------> 3:2 4:2 3 5:2 3…...
二叉树-144.二叉树的前序遍历-力扣(LeetCode)
一、题目解析 对于递归方法的前序遍历十分简单,但对于一位合格的程序猿而言,需要掌握将递归转化为非递归的能力,毕竟递归调用的时候会调用大量的栈帧,存在栈溢出风险。 二、算法原理 递归调用本质是系统建立栈帧,而非…...
aurora与pcie的数据高速传输
设备:zynq7100; 开发环境:window; vivado版本:2021.1; 引言 之前在前面两章已经介绍了aurora读写DDR,xdma读写ddr实验。这次我们做一个大工程,pc通过pcie传输给fpga,fpga再通过aur…...
