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更震撼…

CSS Grid 网格布局简要说明

grid网格布局,是一个二维系统,可以像表格一样将页面容器分割成一块一块的区域,定义子元素的排布和位置。 简单使用: 对父元素设置dispay:grid;grid-template-colums和grid-template-rows来设置几行几列 1. grid-temp…

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…

c# 比较对象是否相同

在C#中&#xff0c;比较两个对象是否相同可以有以下几种方法&#xff1a; ReferenceEquals(object o1, object o2)&#xff1a; 这是一个静态方法&#xff0c;用于比较两个对象的引用是否指向堆中的同一块内存。如果两个对象是同一个实例或者都是 null&#xff0c;那么返回 tru…

python异常之assert语句

1 python异常之assert语句 python的assert语句&#xff0c;是一个断言语句。 用于断言某个表达式的值是否符合预期&#xff0c;不符合则停止运行&#xff0c;并且触发AssertionError异常。 1.1 基本用法 用法 assert test_cond [,err_msg]描述 test_cond&#xff1a;要测…

FreeSWITCH continue_on_fail

先看一段简单的dialplan&#xff1a; <action application"set" data"continue_on_failtrue"/> <action application"bridge" data"user/1001"/> <action application"log" data"ERR run here"/&g…

【JDK新特性】JDK和Springboot各版本新特性介绍

目录 参考资料 以下是一些较新版本的JDK的主要新特性介绍&#xff1a; JDK 8&#xff1a; Lambda 表达式&#xff1a;引入了函数式编程的概念&#xff0c;使得代码更简洁、可读性更强。Stream API&#xff1a;提供了一种高效处理集合数据的方式&#xff0c;支持并行处理。默认…

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…

Flutter开发一个Wifi信号测量应用

在之前的一篇文章中我介绍了如何用Jetpack compose来开发一个Android的Wifi信号测量应用&#xff0c;使得可以根据室内不同地点的Wifi信号来生成指纹&#xff0c;用于室内导航&#xff0c;详情可见Jetpack Compose开发一个Android WiFi信号测量应用-CSDN博客。但是Jetpack comp…

【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的所有接线发现没有小…

js右击自定义菜单

功能点&#xff1a;右击阻止默认事件 根据js提供方法window.getSelection()判断当前有值则出现菜单 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-w…

现代 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”手机…

美团开店宝集成策略:API连接助力用户运营与客服系统

无代码开发与美团开店宝API的协同作用 随着电子商务的快速发展&#xff0c;商家们迫切需要一种既能提高效率又能降低技术门槛的电商管理方案。美团开店宝API提供了这样一种解决方案&#xff0c;特别是当与无代码开发结合时&#xff0c;它的优势更加明显。无代码开发免去了商家…