基于Vue3的Axios异步请求

基于Vue3的Axios异步请求

  • 1. Axios安装与应用
  • 2. Axios网络请求封装
  • 3. axios网络请求跨域前端解决方案server.proxy

1. Axios安装与应用

Axios是一个基于promise的网络请求库,Axios.js.中文文档:https://axios.js.cn/

  • 安装:npm install --save axios
  • 调用:import axios from "axios";

2. Axios网络请求封装

在这里插入图片描述

  • axios.js
import axios from "axios";
import querystring from "querystring";// 创建一个axios实例
const service = axios.create({baseURL: import.meta.env.VITE_BASE_URL, // url = api url + request urlwithCredentials: true, // 当跨域请求时发送cookietimeout: 5000 // 请求超时时间,5000(单位毫秒) / 0 不做限制
});// 请求-拦截器
service.interceptors.request.use(config => {if(config.method == 'post') {config.data = querystring.stringify(config.data)}// config包含网络请求的所有信息return config;},error => {// 处理请求错误console.log(error); // for debugreturn Promise.reject(error);}
)// 响应-拦截器
service.interceptors.response.use(response => {// response包含网络请求响应返回的所有信息return response.status == 200 ? Promise.resolve(response) : Promise.reject(response);},error => {// 处理响应错误console.log(error); // for debugreturn Promise.reject(error);}
)export default service;
  • api/index.js
import request from '../axios';export function getData(data) {return request({url: '/xxx',method: 'post',data,baseURL: import.meta.env.VITE_BASE_URL,});
}

3. axios网络请求跨域前端解决方案server.proxy

详情请见->配置vite

  • vite.config.js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig(({ command, mode }) => {// 根据当前工作目录中的 `mode` 加载 .env 文件// 设置第三个参数为 '' 来加载所有环境变量,而不管是否有 `VITE_` 前缀。const env = loadEnv(mode, process.cwd(), '')return {// vite 配置// base:'./',define: {__APP_ENV__: JSON.stringify(env.APP_ENV),},plugins: [vue(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},server:{proxy: {'/api': {target: 'http://locallhost:8080',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}}
})

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

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

相关文章

有没有一种可能性,你不投递简历,让HR主动联系你

你是否觉得自己得主动给某个公司投递了简历,他们才会联系你,亦或者是自己得主动在招聘APP上联系那个BOSS,他才会反过来跟你说话,又或者是你千方百计的跟他打招呼了,还是没有回应,这一节有可能让你明白,有时候是可以,你不主动,他也会主动联系你的。 目录 1 简历是如何…

QT:小项目:登录界面 (下一个连接数据库)

一、效果图 登录后&#xff1a; 二、项目工程结构 三、登录界面UI设计 四主界面 四、源码设计 login.h #ifndef LOGIN_H #define LOGIN_H#include <QDialog>namespace Ui { class login; }class login : public QDialog {Q_OBJECTpublic:explicit login(QWidge…

Spark原理之Cache Table的工作原理及实现自动缓存重复表的思考

CACHE TABLE的能力 使用此语法&#xff0c;可以由用户自定义要缓存的结果集&#xff0c;实际上就是一个临时表&#xff0c;不过数据存储在Spark集群内部&#xff0c;由Application所分配的executors管理。 一旦定义了一个缓存表&#xff0c;就可以在SQL脚本中随处引用这个表名…

Ansible自动化运维工具主机清单配置

作者主页&#xff1a;点击&#xff01; Ansible专栏&#xff1a;点击&#xff01; 创作时间&#xff1a;2024年4月24日12点21分 Ansible主机清单文件用于定义要管理的主机及其相关信息。它是Ansible的核心配置文件之一&#xff0c;用于Ansible识别目标主机并与其建立连接。 …

小猫咪邮件在线发送系统源码v1.1,支持添加附件

内容目录 一、详细介绍二、效果展示1.部分代码2.效果图展示 三、学习资料下载 一、详细介绍 小猫咪邮件在线发送系统源码v1.1&#xff0c;支持添加附件 一款免登录发送邮件&#xff0c;支持发送附件&#xff0c;后台可添加邮箱,前台可选择发送邮箱 网站数据采取本地保存&…

Java将文件目录转成树结构

在实际开发中经常会遇到返回树形结构的场景&#xff0c;特别是在处理文件系统或者是文件管理系统中。下面就介绍一下怎么将文件路径转成需要的树形结构。 在Java中&#xff0c;将List<String>转换成树状结构&#xff0c;需要定义一个树节点类&#xff08;TreeNode&#…

分享一个网站实现永久免费HTTPS访问的方法

免费SSL证书作为一种基础的网络安全工具&#xff0c;以其零成本的优势吸引了不少网站管理员的青睐。要实现免费HTTPS访问&#xff0c;您可以按照以下步骤操作&#xff1a; 一、 选择免费SSL证书提供商 选择一个提供免费SSL证书的服务商。如JoySSL&#xff0c;他们是国内为数不…

排序算法大总结

引言 排序算法&#xff08;sorting algorithm&#xff09;是用于对一组数据按照特定顺序进行排列。排序算法有着广泛的应用&#xff0c;因为有序数据通常能够被更高效地查找、分析和处理。 如图 1-1 所示&#xff0c;排序算法中的数据类型可以是整数、浮点数、字符或字符串等…

读懂一本书笔记

文章目录 引言 我是一个用读书改变自己生活的人01 会读书&#xff0c;更要会讲书复杂时代&#xff0c;阅读是大众反脆弱的武器你焦虑吗&#xff1f;如何从“单向度的人”变为“多向度的人”第一&#xff0c;读书是主动的学习方式第二&#xff0c;读书是有针对性的学习方式 讲书…

学习CSS3,实现红色心形loading特效

试想一下&#xff0c;如果你的网站在加载过程中&#xff0c;loading图由一个老旧的菊花转动图片&#xff0c;变为一个红色的心形loading特效&#xff0c;那该有多炫酷啊。 目录 实现思路 初始化HTML部分 延迟动画是重点 设定动画效果 完整源代码 最后 实现思路 每个…

内地家长送孩子去香港上学,这4种途径一定要清楚

为了规划好孩子的升学路&#xff0c;不少大湾区的家长&#xff0c;都想把小孩送去香港上学。 但家长和孩子都没有香港身份的话&#xff0c;是没有办法申请香港本地学校的。 内地户籍的孩子要到香港上学&#xff0c;需要家长办理了香港身份&#xff0c;然后为孩子申请“受养人…

ArrayList线程安全问题解决方案

jdk8 Stream API的出现大大简化了我们对于集合元素的处理代码&#xff0c;对于串行流来说&#xff0c;无需考虑线程安全问题&#xff1b;但是&#xff0c;对于并行流来说&#xff0c;由于它是以多线程的方式并行处理同一个集合中的数据元素的&#xff0c;因此&#xff0c;存在着…

V23 中的新增功能:LEADTOOLS React Medical Web 查看器

LEADTOOLS (Lead Technology)由Moe Daher and Rich Little创建于1990年&#xff0c;其总部设在北卡罗来纳州夏洛特。LEAD的建立是为了使Daher先生在数码图象与压缩技术领域的发明面向市场。在过去超过30年的发展历程中&#xff0c;LEAD以其在全世界主要国家中占有的市场领导地位…

游戏视频录制软件有哪些?这3款推荐给你

在数字化时代的今天&#xff0c;游戏视频录制已经成为广大游戏爱好者和职业玩家的必需品&#xff0c;那么游戏视频录制软件有哪些&#xff1f;哪个更适合您呢&#xff1f; 本文将为您推荐3款游戏视频录制软件&#xff0c;帮助您记录下游戏中的精彩瞬间&#xff0c;也可以通过录…

光伏风电智能互联:IEC104转MQTT网关解决方案

背景情况 IEC60870-5-104&#xff0c;是为适应电力系统&#xff0c;包括能源管理系统&#xff08;EMS&#xff09;、数据采集&#xff08;SCADA&#xff09;系统、配电自动化系统以及其他公用事业&#xff0c;安全监控而制定的传输规约。IEC104规约将IEC101的应用层与TCP/IP提…

鸿蒙内核源码分析(用栈方式篇) | 程序运行场地谁提供的

精读内核源码就绕不过汇编语言&#xff0c;鸿蒙内核有6个汇编文件&#xff0c;读不懂它们就真的很难理解以下问题. 1.系统调用是如何实现的? 2.CPU是如何切换任务和进程上下文的? 3.硬件中断是如何处理的? 4.main函数到底是怎么来的? 5.开机最开始发生了什么? 6.关机…

Allegro画PCB中如何旋转器件

PCB中如何旋转器件 鼠标点击器件&#xff0c;然后右击&#xff0c;选择“Rotate”&#xff0c;然后再“Options”里选择旋转的角度和旋转中心&#xff0c;如下图&#xff1a; 然后鼠标转动就可以转动器件了。

数据结构——时间复杂度与空间复杂度

文章目录 一、算法效率算法的复杂度 二、时间复杂度1.时间复杂度的概念2.大O的渐进表示法3.例子 三、空间复杂度1.空间复杂度概念2.例子 四、常见复杂度对比 一、算法效率 算法的复杂度 算法在编写成可执行程序后&#xff0c;运行时需要耗费时间资源和空间(内存)资源 。 因此…

【算法刷题 | 贪心算法07】4.29(用最少数量的箭引爆气球、无重叠区间)

文章目录 12.用最少数量的箭引爆气球12.1题目12.2解法&#xff1a;贪心12.2.1贪心思路12.2.2代码实现 13.无重叠区间13.1题目13.2解法&#xff1a;贪心13.2.1贪心思路13.2.2代码实现 12.用最少数量的箭引爆气球 12.1题目 有一些球形气球贴在一堵用 XY 平面表示的墙面上。墙面…

python可视化图表

1.测试数据准备 2011年1月销售数据.txt 2011-01-01,4b34218c-9f37-4e66-b33e-327ecd5fb897,1689,湖南省 2011-01-01,5b6a6417-9a16-4243-9704-255719074bff,2353,河北省 2011-01-01,ae240260-68a9-4e59-b4c9-206be4c08a8d,2565,湖北省 2011-01-02,c833e851-880f-4e05-9de5-b5…