axios的使用,处理请求和响应,axios拦截器

1、axios官网

https://www.axios-http.cn/docs/interceptors 

2、安装

npm install axios

3、在onMouunted钩子函数中使用axios来发送请求,接受响应

 

4.出现的问题:

(1) 但是如果发送请求请求时间过长,回出现请求待处理的情况,用户体验很不好,没有画面,我们可以加一个loding遮罩层,提示用户正在加载中,但是如果没个请求都手动添加,代码冗余

 

(2) 每个请求都要考虑,程序报错的情况,都需要catch一下,处理下异常,而且在拿数据时我们后端写了统一返回格式,但是前端响应的数据res里我们的数据被一层一层包裹着,每次都要一层一层的拿,代码冗余

 

5、解决方法:
 使用axios的拦截器

 新建一个http文件夹,新建index.ts文件用于定义请求和响应拦截器,在请求和响应拦截器中解决以上问题

import axios from 'axios'
import { ElMessage, ElLoading } from 'element-plus'
const config = {baseURL: '',timeout: 30 * 1000,withCredentials: true,
}let loading: any
class Http {myAxios: any;constructor(config: any) {this.myAxios = axios.create(config);// 添加请求拦截器this.myAxios.interceptors.request.use(function (config: any) {//在发送请求时加载loading层loading = ElLoading.service({lock: true,text: '加载中...',background: 'rgba(0, 0, 0, 0.7)',})return config;}, function (error: any) {// 对请求错误做些什么loading.close()return Promise.reject(error);});// 添加响应拦截器this.myAxios.interceptors.response.use(function (response: any) {//在响应后关闭loading层loading.close()//取出响应的数据进行判断const { code, message, data } = response.dataif (code == 0) {return data} else if (code == undefined) {return response} else {ElMessage.error(message)return Promise.reject(message);}}, function (error: any) {loading.close()return Promise.reject(error);});}get<T>(url: string, params?: object, data = {}): Promise<any> {return this.myAxios.get(url, { params, ...data });}post<T>(url: string, params?: object, data = {}): Promise<any> {return this.myAxios.post(url, params, data);}put<T>(url: string, params?: object, data = {}): Promise<any> {return this.myAxios.put(url, params, data);}delete<T>(url: string, params?: object, data = {}): Promise<any> {return this.myAxios.delete(url, { params, ...data });}}export default new Http(config);

在页面中使用时,直接使用用axios封装好的类

 

结果:

 

 

 

 

 

 

 

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

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

相关文章

进程控制-exec函数

让父子进程来执行不相干的操作 能够替换进程地址空间的代码.text段 执行另外的程序&#xff0c;不需要创建额外的的地址空间 当前程序中调用另外一个应用程序 指定执行目录下的程序 int execl(const char *path, const char *arg&#xff0c;/* (char *) NULL */); /* pat…

3.python

闯关 3作业 本节关卡&#xff1a; 学习 python 虚拟环境的安装 Python 的基本语法 学会 vscode 远程连接 internstudio 打断点调试 python 程序

详解前缀码与前缀编码

前缀编码是一种数据压缩技术&#xff0c;也被称为可变长度编码。它的基本原理是将频繁出现的字符或字符序列用较短的编码表示&#xff0c;而较少出现的字符或字符序列用较长的编码表示&#xff0c;从而达到压缩数据的目的。 概念定义 前缀码&#xff1a;给定一个编码序列的集合…

数据库管理-第216期 Oracle的高可用-01(20240703)

数据库管理216期 2024-07-03 数据库管理-第216期 Oracle的高可用-01&#xff08;20240703&#xff09;1 MAA简介2 MAA等级2.1 BRONZE2.2 SILVER2.3 GOLD2.4 PLATINUM 3 业务延续性总结 数据库管理-第216期 Oracle的高可用-01&#xff08;20240703&#xff09; 作者&#xff1a;…

cs224n作业4

NMT结构图&#xff1a;&#xff08;具体结构图&#xff09; LSTM基础知识 nmt_model.py&#xff1a; 参考文章&#xff1a;LSTM输出结构描述 #!/usr/bin/env python3 # -*- coding: utf-8 -*-""" CS224N 2020-21: Homework 4 nmt_model.py: NMT Model Penchen…

Hugging face Transformers(3)—— Tokenizer

Hugging Face 是一家在 NLP 和 AI 领域具有重要影响力的科技公司&#xff0c;他们的开源工具和社区建设为NLP研究和开发提供了强大的支持。它们拥有当前最活跃、最受关注、影响力最大的 NLP 社区&#xff0c;最新最强的 NLP 模型大多在这里发布和开源。该社区也提供了丰富的教程…

uniapp小程序接口返回文件流下载文件

uniapp小程序接口返回文件流数据&#xff0c;下载导出文件 使用uni.request post方法获取文件流&#xff0c;如果是get可以使用uni.downloadFile exportfun(){uni.request({url: xxx,data: {},method:POST,responseType: arraybuffer,header: {},success: (res) > {const …

Java并发编程-AQS详解及案例实战(上篇)

文章目录 AQS概述AQS 的核心概念AQS 的工作原理AQS 的灵活性使用场景AQS的本质:为啥叫做异步队列同步器AQS的核心机制“异步队列”的含义“同步器”的含义总结加锁失败的时候如何借助AQS异步入队阻塞等待AQS的锁队列加锁失败时的处理流程异步入队的机制总结ReentractLock如何设…

雨量监测站:守护大地的晴雨表

雨量监测站是一种专门用于测量和记录降雨量的设施。它通常由雨量计、数据采集器、传输装置和数据处理系统组成。雨量计负责感应雨滴的接触&#xff0c;通过一定的机制将降雨量转化为电信号或数字信号。数据采集器则负责收集这些信号&#xff0c;并将其传输至数据处理系统进行分…

FastAPI+vue3+Primeflex教学20240706,渲染阶乘案例

子绝父相 相对定位是相对于自己原本的位置定位。 绝对定位&#xff0c;如果父元素设置了相对定位&#xff0c;则相对于父元素进行绝对定位&#xff0c;否则相对于最近的设置了相对定位的元素进行绝对定位&#xff0c;或者相对于根元素进行绝对定位。 定位有四个方向&#xff0…

GitHub Copilot API

1. 引言 GitHub Copilot&#xff1a;智能编程的革新者 在软件开发的浩瀚宇宙中&#xff0c;GitHub Copilot犹如一颗璀璨的新星&#xff0c;以其独特的魅力引领着智能编程的新纪元。作为GitHub与OpenAI合作推出的革命性工具&#xff0c;Copilot不仅仅是一个简单的代码补全插件…

拉格朗日插值法【python,算法】

拉格朗日插值是一种在数值分析中用来构建通过一系列已知数据点的多项式插值的方法。这种方法以 18 世纪的法国数学家约瑟夫拉格朗日命名。当给定一组离散的数据点(&#x1d465;_0,&#x1d466;_0),(&#x1d465;_1,&#x1d466;_1),...,(&#x1d465;_&#x1d45b;,&…

38 IO流

目录 C语言的输入和输出流是什么CIO流stringstream的简单介绍 1. C语言的输入与输出 C语言中我们用到的最频繁的输出方式是scanf和printf&#xff0c;scanf&#xff1a;从标准输入设备&#xff08;键盘&#xff09;读取数据&#xff0c;并将值存在变量中。printf&#xff1a;…

JSP WEB开发(二) JavaBean

目录 JavaBean JavaBean特征 JavaBean的标签 JavaBean 的范围 标签 JavaBean JavaBean 是一种符合某些命名和设计规范的 Java 类&#xff0c;它是一种可重用组件技术&#xff0c;主要用于封装数据&#xff0c;执行负责的计算任务&#xff0c;封装事务逻辑等。JavaBean 的实…

高级计算机体系结构--期末教材复习

Chap2 性能评测和并行编程性能评测并行编程为什么需要三次 barrier改进方法 Chap3 互连网络交换和路由二维网格中 XY 路由 死锁、活锁及饿死死锁避免的方法&#xff1a;虚通道、转弯模型二维网格中最小 西向优先、北向最后和负向优先算法转弯模型&#xff1a;超立方体的部分自适…

安装 tesseract

安装 tesseract 1. Ubuntu-24.04 安装 tesseract2. Ubuntu-24.04 安装支持语言3. Windows 安装 tesseract4. Oracle Linux 8 安装 tesseract 1. Ubuntu-24.04 安装 tesseract sudo apt install tesseract-ocr sudo apt install libtesseract-devreference: https://tesseract-…

绝区贰--及时优化降低 LLM 成本和延迟

前言 大型语言模型 (LLM) 为各行各业带来了变革性功能&#xff0c;让用户能够利用尖端的自然语言处理技术处理各种应用。然而&#xff0c;这些强大的 AI 系统的便利性是有代价的 — 确实如此。随着 LLM 变得越来越普及&#xff0c;其计算成本和延迟可能会迅速增加&#xff0c;…

ctfshow web 36d 练手赛

不知所措.jpg 没啥用然后测试了网站可以使用php伪达到目的 ?filephp://filter/convert.base64-encode/resourcetest/../index.<?php error_reporting(0); $file$_GET[file]; $file$file.php; echo $file."<br />"; if(preg_match(/test/is,$file)){inclu…

如何处理 PostgreSQL 中由于表连接顺序不当导致的性能问题?

文章目录 一、理解表连接和连接顺序二、识别由于表连接顺序不当导致的性能问题三、影响表连接顺序的因素四、解决方案手动调整连接顺序创建合适的索引分析数据分布和优化查询逻辑 五、示例分析手动调整连接顺序创建索引优化查询逻辑 六、总结 在 PostgreSQL 中&#xff0c;表连…

uni-app优点有哪些?

uni-app的优点主要有以下几个方面&#xff1a; 跨平台开发&#xff1a;uni-app支持一套代码编写&#xff0c;多端运行&#xff0c;无需额外的适配工作&#xff0c;可以同时在iOS、Android、Web等多个平台上运行。这大大提高了开发效率&#xff0c;节省了开发成本和时间。统一的…