Vue 封装的 axios 类的使用(小bug 改进)

http类

import { baseUrl } from "./config";   //引入config.js中的配置
import axios from "axios";   		//引入axios
import qs from "querystringify";       //form-Data请求时的工具类class Http{axios = null;lastRequestIntercept = null;constructor() {//在初始化方法中,创建一个 axios的实例 , 并配置一些基础配置this.axios = axios.create({baseURL:baseUrl,timeout:10000,});//为新建的 实例添加一个响应 响应 响应 拦截器, 可以根据情况, 在err 中,设置,如里返回的参数为401,就让用户跳转到 登录页等功能, 自已写, 也可以把这个拦截器删除掉this.axios.interceptors.response.use(response=>{return response.data;},(err)=>{console.log(err)if(err){}return Promise.reject(err)})}//dataType的选项有 queryString == qs, formData, json//封装一个请求的方法request({url,data,method="get",auth=false,dataType="json"}){//如果请求中需要token,就在store缓存中取出token,并设置在请求头中if(auth){//这是一个请求拦截器,可以在请求之前添加,任何想要添加的数据this.axios.interceptors.request.use((config)=>{let token = localStorage.getItem("token")token && (config.headers.token = token);console.log(config)return config;},(err)=>{return Promise.reject(err)})}//如果是get方法, 直接传参数就可以了 这里的 data是一个json对象  如  data = {aparam:"aaa",bparam:"bbbb"}if(method === "get"){return this.axios.get(url,{params:data})}//下面的 data 都是一个对象参数//当post传值时, 有可能是 json 的 也有可能是 qs 的, 也有可以是文件类型的 formdata的,下面的方法根据情况,分别组织了参数格式,以及header的头,正确传参可以了if(method === "post"){if(dataType === "json") {return this.axios.post(url, data, {headers:{"Content-Type":"application/json"}})}else if(dataType === "formData"){let formData = new FormData();Object.keys(data).forEach((key)=>{formData.append(key,data[key])})return this.axios.post(url, formData, {headers:{"Content-Type":"multipart/form-data"}})}else if(dataType === "qs"){return this.axios.post(url,qs.stringify(data),{headers:{"Content-Type":"application/x-www-form-urlencoded"}})}}}}export { Http }

业务类 api 继承 http
api.js

import {Http} from "@/utils/http"
class api extends Http{static getinstance(){return new api();}login(data){return this.request({url:"/api/user/oauth2",method:"post",data,dataType:"formData"})}//用户是否是新用户isnewuser(){return this.request({url:"/api/user/isNew",method:"post",auth:true})}//添加抢票addrobinfo(data){return this.request({url:"/api/ticket/add",method:"post",data,dataType:"formData",auth:true,})}//抢票记录robrecord(){return this.request({url:"/api/ticket/index",method:"post",auth:true})}
}
export default api

页面中使用时

在这里插入图片描述
改进方法, 每一次都来 new api()的实例有点麻烦,所以, 我在 api 的类中添加了一个静态方法
在这里插入图片描述
有了静态方法,就不用每次使用时就要new了
看一下使用的代码
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

Linux安全基线与加固

基于CIS 基线 GitHub - daniel-armbrust/linux-security-baseline: Linux Security Baseline based on CIS Benchmarks. |----------------[ GNU/Linux安全基线与加固-0.3 ]----------------|0. About this doc1. Routine security baseline1.1 Security fix update1.2 Pass…

开源LLMs导览:工作原理、顶级LLM列表对比

目录 一、开源 LLM 是什么意思?二、开源LLM如何工作?2.1 预训练2.2 代币化2.3 开源LLM的微调2.4 输入编码2.5 训练与优化2.6 推理 三、开源LLM对组织的好处3.1 增强的数据安全和隐私3.2 节约成本3.3 减少供应商依赖性3.4 代码透明度 四、哪种LLM模式最好…

数据可视化在商业领域有哪些重要性?

数据可视化在商业领域的重要性体现在多个方面,它通过将复杂的数据集转化为直观、易于理解的图形和图表,帮助企业和组织做出更明智的决策。以下是数据可视化对商业的一些关键重要性: 提高决策效率:通过直观的图表和图形&#xff0c…

漫漫数学之旅031

文章目录 经典格言数学习题古今评注名人小传 - 经典格言 如果没有数学知识,这个世界的事物是无法搞清楚的。——罗杰培根(Roger Bacon) 好的,各位看官,让我们来听听罗杰培根这位中世纪的“科学老顽童”是怎么说的&…

罗克韦尔AB的PLC实现ModbusTCP和ModbusRTU协议标签方式通讯

本文是通过IGT-DSER智能网关读写AB罗克韦尔Compact、Control系列PLC的标签数据缓存并转为Modbus从站协议,与上位机通讯的案例。 打开智能网关的参数软件(下载地址),通过功能->数据转发与平台对接,再选择数据转发与缓存’,进入以…

基于java+springboot+vue实现的城市垃圾分类管理系统(文末源码+Lw)23-191

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本城市垃圾分类管理系统就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数…

基于Java+Selenium的WebUI自动化测试框架(一)---页面元素定位器

🔥 交流讨论:欢迎加入我们一起学习! 🔥 资源分享:耗时200小时精选的「软件测试」资料包 🔥 教程推荐:火遍全网的《软件测试》教程 📢欢迎点赞 👍 收藏 ⭐留言 &#x1…

Python模块百科_命令行参数解析argparse

Python模块百科_命令行参数解析模块argparse 一、简介(argparse)二、命令行参数解析器类(ArgumentParser)三、添加命令行参数解析规则(add_argument)3.1 关键字name or flags3.2 关键字action3.2.1 store3.2.2 store_const3.2.3 store_true 和 store_false3.2.4 append3.2.5 ap…

Android 剪切板相关

Android 剪切板相关 本篇文章简单介绍android中的ClipboardManager. 1:简介 ClipboardManager是android中用于管理剪切板一个类.它允许应用程序读取和写入剪切板数据,包括文本,图片等. 2: 获取实例 获取实例也很简单.如下: ClipboardManager clipboardManager (Clipboar…

【UEFI】数字签名的使用

简介 1) 数字签名是指附加在数据单元上的一些数据,或是对数据单元所作的密码变换。这种数据或变换能使数据单元的接收者确认数据单元的来源和数据完整性,并保护数据,防止被人伪造。签名机制的本质特征是该签名只通过签名者的私有…

使用python查看官网是否发布新的内容

目录 前言 第一章、python介绍和使用pip install下载包 1.python介绍 2.使用vscode编写python 3.pip install的使用 第二章、查看官网是否发布新的内容 第三章、代码实现 目录结构 代码实现 check_new_news.py files.py news.py main.py file.txt 运行演示 前言 也…

python读写csv和json数据

python读写csv数据 在Python中,读写CSV(Comma Separated Values)数据通常使用内置的csv模块。以下是一个简单的例子,展示了如何使用csv模块来读取和写入CSV文件。 首先,假设我们有一个名为example.csv的文件&#xff0…

算法训练营day34(补), 动态规划2

//62. 不同路径 func uniquePaths(m int, n int) int { dp : make([][]int, m) // 行赋初始值为1 for i : range dp { dp[i] make([]int, n) dp[i][0] 1 } // 列赋初始值为1 for j : 0; j < n; j { dp[0][j] 1 } for i : 1; i < m; i { for j : 1; j < n; j { dp[…

【Azure 架构师学习笔记】- Azure Databricks (7) --Unity Catalog(UC) 基本概念和组件

本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Databricks】系列。 接上文 【Azure 架构师学习笔记】- Azure Databricks (6) - 配置Unity Catalog 前言 在以前的Databricks中&#xff0c;主要由Workspace和集群、SQL Warehouse组成&#xff0c; 这两年Databricks公…

我们在SqlSugar开发框架中,用到的一些设计模式

我们在《SqlSugar开发框架》中&#xff0c;有时候都会根据一些需要引入一些设计模式&#xff0c;主要的目的是为了解决问题提供便利和代码重用等目的。而不是为用而用&#xff0c;我们的目的是解决问题&#xff0c;并在一定的场景下以水到渠成的方式处理。不过引入任何的设计模…

【YOLOX-nano】YOLOX-nano的推理实践

目录 1 pt文件和pth文件的区别 2 安装依赖库 3 模型下载 4 实践 YOLOX-nano.pth模型转换为YOLOX-nano.onnx模型</

【selenium】WebElement、WebDriver、三种等待方式

目录 一、WebElement 1、click()——触发当前元素的点击事件 2、clear()——清空内容 3、sendKeys(...) 4、按键操作&#xff0c;回车 解决button不好定位和点击的情况&#xff0c;用回车去解决 5、getTagName()——获取元素的的标签名 6、getAttribute(当前标签具有的属…

SpringBoot对于SpringMVC的支持

创建项目 版本说明这里使用的 SpringBoot 2.0.0.Release SpringBoot对于SpringMVC的支持 在之前的开发中很多场景下使用的是基于xml配置文件或者是Java配置类的方式来进行SpringMVC的配置。一般来讲&#xff0c;初始的步骤如下所示 1、初始化SpringMVC的DispatcherServlet2、…

设计模式-工厂方法模式(C++)

工厂方法模式&#xff08;Factory Method Pattern&#xff09;是一种创建型设计模式&#xff0c;它定义了一个用于创建对象的接口&#xff0c;但将实际的对象创建过程延迟到子类中。这种模式解耦了具体产品的创建过程&#xff0c;使得系统更加灵活和可扩展。 下面是一个使用 C…

pytest结合Allure生成测试报告

文章目录 1.Allure配置安装2.使用基本命令报告美化1.**前置条件**2.**用例步骤****3.标题和描述****4.用例优先级**3.进阶用法allure+parametrize参数化parametrize+idsparametrize+@allure.title()4.动态化参数5.环境信息**方式一****方式二**6.用例失败截图1.Allure配置安装 …