vue3 全局配置Axios实例

目录

前言

配置Axios实例

页面使用

总结


前言

Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 Node.js 环境。它提供了一种简单、一致的 API 来处理HTTP请求,支持请求和响应的拦截、转换、取消请求等功能。关于它的作用:

  1. 发起 HTTP 请求: Axios 提供了丰富的 API,使得在浏览器和 Node.js 中发起 HTTP 请求变得非常容易。可以发送 GET、POST、PUT、DELETE 等不同类型的请求。

  2. Promise 风格: Axios 使用 Promise 风格的 API,使得在异步请求中更容易处理数据和错误。可以使用 .then() 处理成功的响应,使用 .catch() 处理错误。

  3. 拦截请求和响应: 可以在请求和响应被发送或接收之前进行拦截处理。这使得在请求发送前或响应返回后可以进行一些全局的处理,比如添加请求头、处理错误等。

  4. 自动转换 JSON 数据: Axios 在接收到响应数据时,会自动将 JSON 字符串转换为 JavaScript 对象。这样可以方便地处理和操作服务器返回的 JSON 数据。

  5. 取消请求: Axios 允许你创建一个取消请求的令牌,以便在需要时取消尚未完成的请求。这在处理组件销毁或用户导航时非常有用,可以避免不必要的请求。

  6. 全局配置: 可以配置全局的默认值,例如基础URL、超时时间等,以便在整个应用程序中使用相同的设置。

  7. 处理请求和响应数据: 可以在请求和响应时对数据进行转换和处理。这包括序列化请求数据、解析响应数据等。

  8. 上传和下载进度: Axios 提供了上传和下载进度的事件,可以监视请求和响应的进度。这对于实时显示进度条等功能非常有用。

总体而言,Axios是一个强大而灵活的工具,可以简化和优化HTTP请求的处理,是前端开发中常用的网络请求库之一,并且当在Vue.js 3项目中使用Axios时,可以通过全局设置来配置Axios实例,以便在整个应用程序中共享相同的请求和响应逻辑,比如500或者401时,系统的一些操作。

配置Axios实例

前提,需要先安装axios:npm install axios

如下:

开始配置,先在项目的一个文件夹下某创建一个文件,里面进行Axios 实例配置,通常在src/utils下,一般内容有:

import axios from 'axios';// 创建 Axios 实例
const service = axios.create({baseURL: process.env.VUE_APP_BASE_URL, // 使用环境变量配置 baseURLtimeout: 5000, // 设置请求超时时间
});// 请求拦截器
service.interceptors.request.use((config) => {// 在请求发送前可以进行一些配置,例如添加认证信息等config.headers['X-Auth-Token'] = 'your_token'; // 示例:添加认证信息return config;},(error) => {return Promise.reject(error);}
);// 响应拦截器
service.interceptors.response.use((response) => {// 在响应返回后,可以进行一些处理,例如判断是否需要更新令牌等// ...return response;},(error) => {// 处理响应错误// ...return Promise.reject(error);}
);export default service;

上面是比较基础的,可以在此基础上进行自定义的操作,比如我下面这种:

axios-req.ts

import axios from 'axios'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { useBasicStore } from '@/store/basic'//使用axios.create()创建一个axios请求实例
const service = axios.create()
let loadingInstance: any = null //loading实例
let tempReqUrlSave = ''
let authorTipDoor = trueconst noAuthDill = () => {authorTipDoor = falseElMessageBox.confirm('请重新登录', {confirmButtonText: '重新登录',closeOnClickModal: false,showCancelButton: false,showClose: false,type: 'warning'}).then(() => {useBasicStore().resetStateAndToLogin()authorTipDoor = true})
}//请求前拦截
service.interceptors.request.use((req: any) => {const { token, axiosPromiseArr }: any = useBasicStore()//axiosPromiseArr收集请求地址,用于取消请求req.cancelToken = new axios.CancelToken((cancel) => {tempReqUrlSave = req.urlaxiosPromiseArr.push({url: req.url,cancel})})//设置token到headerif (token) req.headers['X-Auth-Token'] = token//如果req.method给get 请求参数设置为 ?name=xxxif ('get'.includes(req.method?.toLowerCase()) && !req.params) req.params = req.data//req loading// @ts-ignoreif (req.reqLoading ?? true) {loadingInstance = ElLoading.service({lock: true,fullscreen: true,// spinner: 'CircleCheck',text: '数据载入中...',background: 'rgba(0, 0, 0, 0.1)'})}return req},(err) => {//发送请求失败Promise.reject(err)}
)
//请求后拦截
service.interceptors.response.use((res: any) => {//取消请求useBasicStore().remotePromiseArrByReqUrl(tempReqUrlSave)if (loadingInstance) {loadingInstance && loadingInstance.close()}//download fileif (res.data?.type?.includes("sheet")) {return res}const { code, msg } = res.dataconst successCode = [0,200,20000]const noAuthCode = [401,403]if (successCode.includes(code)) {return res.data} else {//authorTipDoor 防止多个请求 多次alterif (authorTipDoor) {if (noAuthCode.includes(code)) {noAuthDill()} else {// @ts-ignoreif (!res.config?.isNotTipErrorMsg) {ElMessage.error({message: msg,duration: 2 * 1000})} else {return res}return Promise.reject(msg)}}}},//响应报错(err) => {//取消请求useBasicStore().remotePromiseArrByReqUrl(tempReqUrlSave)if (loadingInstance) {loadingInstance && loadingInstance.close()}ElMessage.error({message: err,duration: 2 * 1000})return Promise.reject(err)}
)
//导出service实例给页面调用 , config->页面的配置
export default function axiosReq(config) {return service({baseURL: import.meta.env.VITE_APP_BASE_URL,timeout: 8000,...config})
}

 之后我们可以在api文件夹下新建一个user.ts,放一些API。就像这样:

import axiosReq from '@/utils/axios-req'//登录
export const loginReq = (subForm) => {return axiosReq({url: '/login',method: 'post',data: subForm})
}//退出登录
export const loginOutReq = () => {return axiosReq({url: '/loginOut',method: 'post'})
}

页面使用

这里以登录页为例

登录页面发送请求,一般会发送用户账号密码,然后获取到一个token,所以我一般这样用:


import { loginReq } from '@/api/user'const loginFunc = () => {loginReq({username: subForm.keyword,password: subForm.password}).then(({ data }) => {elMessage('登录成功')basicStore.setToken(data?.token)router.push('/')}).catch((err) => {tipMessage.value = err?.msg}).finally(() => {subLoading.value = false})
}

总结

如果想在Vue全局使用的话,可以用provideinject来在整个应用程序中提供和注入Axios实例。

import { createApp } from 'vue';
import App from './App.vue';
import request from '@/utils/request';const app = createApp(App);// 提供Axios实例
app.provide('request', request);app.mount('#app');

页面使用:

export default {inject: ['request'],methods: {fetchData() {this.request.get('/api/data').then(response => {// 处理响应数据}).catch(error => {// 处理请求错误});},},
};

但是还是建议每个页面需要哪些API就引入哪些吧。

总结,aixos的全局配置会方便API管理,并且对于一些关于 token 处理和错误处理的逻辑,以及状态码的反馈都是比较方便的,根据项目需求来实现。

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

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

相关文章

音视频技术开发周刊 | 325

每周一期,纵览音视频技术领域的干货。 新闻投稿:contributelivevideostack.com。 AI读心术震撼登顶会!模型翻译脑电波,人类思想被投屏|NeurIPS 2023 在最近举办的NeurIPS大会上,研究人员展示了当代AI更震撼…

CMakeLists.txt

源码结构 生成可执行程序 # CMake最小版本号 cmake_minimum_required(VERSION 3.15.0)#增加-stdc11 set(CMAKE_CXX_STANDARD 11)#设置工程名称 project(calculate)#[[ #方法一&#xff1a;添加源码文件 #aux_source_directory(< dir > < variable >) #dir&#xf…

Python能做大项目(7) - Poetry: 项目管理的诗和远方之二

依赖管理 实现依赖管理的意义 我们已经通过大量的例子说明了依赖管理的作用。总结起来&#xff0c;依赖管理不仅要检查项目中声明的直接依赖之间的冲突&#xff0c;还要检查它们各自的传递依赖之间的彼此兼容性。 Poetry 进行依赖管理的相关命令 在 Poetry 管理的工程中&am…

基于电商场景的高并发RocketMQ实战-Commitlog基于内存的高并发写入优化、基于JVM offheap的内存读写分离机制

&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308; 【11来了】文章导读地址&#xff1a;点击查看文章导读&#xff01; &#x1f341;&#x1f341;&#x1f341;&#x1f341;&#x1f341;&#x1f341;&#x1f3…

【Hadoop】ZooKeeper数据模型Znode

ZooKeeper 数据模型ZnodeZooKeeper 中的时间ZooKeeper 节点属性 ZooKeeper 数据模型Znode 前面提过&#xff0c;Zookeeper相当于文件系统通知机制。既然是文件系统&#xff0c;那就涉及数据模型。 ZooKeeper 的数据模型在结构上和Unix标准文件系统非常相似&#xff0c;都是采用…

分类预测 | Matlab实现SCSO-SVM基于沙猫群优化算法优化支持向量机的多变量分类预测【23年新算法】

分类预测 | Matlab实现SCSO-SVM基于沙猫群优化算法优化支持向量机的多变量分类预测【23年新算法】 目录 分类预测 | Matlab实现SCSO-SVM基于沙猫群优化算法优化支持向量机的多变量分类预测【23年新算法】分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现SCSO-…

C# WPF上位机开发(windows pad上的应用)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 大部分同学可能都认为c# wpf只能用在pc端。其实这是一种误解。c# wpf固然暂时只能运行在windows平台上面&#xff0c;但是windows平台不仅仅是电脑…

听GPT 讲Rust源代码--src/tools(27)

File: rust/src/tools/clippy/clippy_lints/src/methods/suspicious_to_owned.rs 文件rust/src/tools/clippy/clippy_lints/src/methods/suspicious_to_owned.rs的作用是实施Clippy lint规则&#xff0c;检测产生潜在性能问题的字符转换代码&#xff0c;并给出相关建议。 在Rus…

概率论中的 50 个具有挑战性的问题 [第 6 部分]:Chuck-a-Luck

一、说明 我最近对与概率有关的问题产生了兴趣。我偶然读到了弗雷德里克莫斯特勒&#xff08;Frederick Mosteller&#xff09;的《概率论中的五十个具有挑战性的问题与解决方案》&#xff09;一书。我认为创建一个系列来讨论这些可能作为面试问题出现的迷人问题会很有趣。每篇…

详解ibm_t60(945)的板子的保护隔离和ec的待机供电

1.,首先看ec待机条件: 待机供电&#xff0c;32k时钟&#xff0c;复位&#xff0c;适配器检测&#xff0c;开关信号。但是视频居然是找适配器的接口&#xff0c;跟着视频走&#xff0c;所以我先找打了适配器接口j24。vint20为公共点&#xff0c;我查了vint20的所有接线发现没有小…

现代 NLP:详细概述,第 1 部分:transformer

阿比吉特罗伊 一、说明 近五年来&#xff0c;随着 BERT 和 GPT 等思想的引入&#xff0c;我们在自然语言处理领域取得了巨大的成就。在本文中&#xff0c;我们的目标是逐步深入研究改进的细节&#xff0c;并了解它们带来的演变。 二、关注就是你所需要的 2017 年&#xff0c;来…

CSRF(Pikachu)

CSRF&#xff08;get&#xff09; 首先我们先登录账号 admin 密码是&#xff1b;123456 点击修改个人信息 用F12或者BP 抓包看看我们的url 那么构成的CSRF攻击payload为http://pikachu.shifa23.com/pikachu/vul/csrf/csrfget/csrf_get_edit.php?sexboy&phonenum”手机…

Django-REST-Framework 如何快速生成Swagger, ReDoc格式的 REST API 文档

1、API 接口文档的几种规范格式 前后端分离项目中&#xff0c;使用规范、便捷的API接口文档工具&#xff0c;可以有效提高团队工作效率。 标准化的API文档的益处&#xff1a; 允许开发人员以交互式的方式查看、测试API接口&#xff0c;以方便使用将所有可暴露的API接口进行分…

普冉PY32系列(十四) 从XL2400迁移到XL2400P

目录 普冉PY32系列(一) PY32F0系列32位Cortex M0 MCU简介普冉PY32系列(二) Ubuntu GCC Toolchain和VSCode开发环境普冉PY32系列(三) PY32F002A资源实测 - 这个型号不简单普冉PY32系列(四) PY32F002A/003/030的时钟设置普冉PY32系列(五) 使用JLink RTT代替串口输出日志普冉PY32…

电商数据分析-02-电商业务介绍及表结构

参考 电商业务简介 大数据项目之电商数仓、电商业务简介、电商业务流程、电商常识、业务数据介绍、电商业务表、后台管理系统 举个例子:&#x1f330; 1.1 电商业务流程 电商的业务流程可以以一个普通用户的浏览足迹为例进行说明&#xff0c;用户点开电商首页开始浏览&…

shell 编程中内置的变量(冷门又好用)

简介 分别盘点一下 shell 中的内置变量&#xff0c;真的巨好用&#xff01;&#xff01;&#xff01;包括&#xff1a;环境变量类、shell 变量类、终端设置类和其他一些变量。 常用的内置变量目录如下 1. 环境变量类 $MACHTYPE&#xff1a;机器类型 $OSTYPE&#xff1a;操作…

JVM初识-----01章

一.虚拟机与java虚拟机的区别以及共同点 1.虚拟机&#xff08;Virtual Machine&#xff0c;简称VM&#xff09; 是一种能够在物理计算机上模拟一台完整的计算机系统的软件。它运行在宿主操作系统之上&#xff0c;可以提供一个独立的运行环境&#xff0c;使得在不同的操作系统上…

【深度学习-目标检测】03 - Faster R-CNN 论文学习与总结

论文地址&#xff1a;Faster R-CNN: Towards Real-Time ObjectDetection with Region Proposal Networks 论文学习 1. 摘要与引言 研究背景与挑战&#xff1a;当前最先进的目标检测网络依赖于 区域提议&#xff08;Region Proposals&#xff09;来假设目标的位置&#xff0c…

CentOS系统环境搭建(二十六)——使用nginx在无域名情况下使用免费证书设置https

centos系统环境搭建专栏&#x1f517;点击跳转 文章目录 使用nginx在无域名情况下使用免费证书设置https1.获取SSL证书1.1 生成SSL密钥1.2 生成SSL证书1.3 重命名密钥文件 2.nginx配置https2.1 放证书2.2 修改nginx.conf文件2.2.1 将80端口重定向到4432.2.2 端口443配置ssl证书…

Upload-Labs-Linux

题目 1.打开靶机 随便上传一个图片&#xff0c;查看get请求发现/upload/XXX.jpg 2.创建一个脚本文件 命名为flag.php.jpg,并上传 脚本文件内容&#xff1a; <?php eval($_POST[1234])?> 3上传后复制文件get请求的链接并打开蚁剑 连接密码为123 双击链接 4&#xff…