基于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,一经查实,立即删除!

相关文章

CM3:qemu执行汇编

正文 环境:macOS M1。 前文讨论了 qemu 模拟8086 的平台运行8086 汇编代码,本文将讨论 qemu 模拟arm 平台运行 CM3 代码。代码: .syntax unified .cpu cortex-m3.global _start.equ UART0_BASE, 0x4000C000 .equ UART0_DR, UART0_BASE 0x0…

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

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

蛋白质相互作用

STRING数据库简介 STRING是一个包含已知和预测蛋白质-蛋白质相互作用的数据库。数据库涵盖了直接(物理)和间接(功能)相互作用。包含来自实验仓库、计算预测方法和公共文本集合的多种证据来源。覆盖超过2400万个蛋白质,涉及5090个生物体。提供R包STRINGdb以方便用户从R访问…

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&#…

CMIP6降水单位转换

cmip6中的降水单位一般是 k g m − 2 s − 1 kgm^{-2}s^{-1} kgm−2s−1 ,一般观测降水数据如GPCP为 m m / d a y mm/day mm/day,如何转换呢&#xff1f; # 转换为mm/day def kgm2s_to_mmday(kg_m2_s):return kg_m2_s * 86400# 转换为mm^2/day^2 def kgm2s_to_mm2day2(kg_m2_s)…

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

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

OpenResty 安装及lua-resty-redis

目的&#xff1a; 需要记录用户真实IP 访问量 1. 下载openresty&#xff1a; https://openresty.org/download/openresty-1.25.3.1.tar.gz2. 编译安装 ./configure --help | more 可以查看configure 可选参数 # 1、安装前置依赖 yum install -y readline-devel pcre pcre-…

排序算法大总结

引言 排序算法&#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提…