【vue ajax】封装ajax,可直接复用

news2024/11/17 13:41:42

在项目经过统一代理后,部分功能想直接发送请求,不用统一api,可以封装一个ajax进行网络传输

    ajax(method, url, data) {
      return new Promise(function (resolve, reject) {
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              resolve(JSON.parse(xhr.response))
            } else {
              reject({
                code: xhr.status
              })
            }
          }
        }
        method = method.toLowerCase()
        //如果是get请求,将参数拼接到url中
        if (method == 'get') {
          const arr = []
          for (let key in data) {
            arr.push(
              key + '=' + encodeURIComponent(data[key])
            )
          }
          arr.join('&')
          url += '?' + arr.join('&')
        }


        xhr.open(method, url, true);

        xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('token'))
        //如果是post请求
        if (method == 'post') {
          xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
          xhr.send(JSON.stringify(data))
        } else {
          xhr.send();
        }
      })
    },

可以把上面函数直接放在method就可直接调用了

其中要注意post的请求头的参数要符合接口要求

如果参数是直接拼到url后面,那也可以拼接好,直接传url,data不用传就行

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

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

相关文章

HCIP实验6-交换接口实验

搭建实验拓扑图 实验开始 配置PC1 配置PC2 配置PC3 划分vlan 将sw1划分到vlan3 [sw1]interface e0/0/2 [sw1-Ethernet0/0/2]port link-type access [sw1-Ethernet0/0/2]port default vlan 3 将sw3划分到vlan4 [sw3]interface e0/0/2 [sw3-Ethernet0/0/2]port link-type a…

多数据源组件dynamic-datasource使用总结

简介 dynamic-datasource-spring-boot-starter 是一个基于springboot的快速集成多数据源的启动器。 其支持 Jdk 1.7, SpringBoot 1.5.x 2.x.x 3.x.x。 特性 支持 数据源分组 ,适用于多种场景 纯粹多库 读写分离 一主多从 混合模式。支持数据库敏感配置信息 加密…

小迪安全23WEB 攻防-Python 考点CTF 与 CMS-SSTI 模版注入PYC 反编译

#知识点: 1、PYC 文件反编译 2、Python-Web-SSTI 3、SSTI 模版注入利用分析 各语言的SSIT漏洞情况: SSIT漏洞过程: https://xz.aliyun.com/t/12181?page1&time__1311n4fxni0Qnr0%3DD%2FD0Dx2BmDkfDCDgmrYgBxYwD&alichlgrefhtt…

【C++】wxWidgets编程的程序入口点

在wxWidgets中,程序的入口点通过wxIMPLEMENT_APP宏定义来设置,该宏会扩展为一个实现了main函数或者在Windows上是WinMain函数的代码。wxIMPLEMENT_APP宏与wxDECLARE_APP宏一起使用来设置基于wxWidgets的应用程序的启动代码。 使用wxIMPLEMENT_APP宏通常是…

vue实现在线Excel表格功能

目录 1.安装x-data-spreadsheet xlsx 2.引入 3.使用 1.安装x-data-spreadsheet xlsx npm i x-data-spreadsheet xlsx2.引入 import zhCN from "x-data-spreadsheet/src/locale/zh-cn"; import Spreadsheet from "x-data-spreadsheet"; import * as X…

利用sqlmap探测get类型注入

环境准备:构建完善的安全渗透测试环境:推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 基础:GET基于报错的sql注入利用-脱库-CSDN博客 sqlmap 工具是kali自带的 例子我都用sql靶场的第一关做演示 1、探测数据库名 sqlmap -u "http://192.168.0.103/sqlilab…

Redis配置类,序列化

解释说明: 当前配置类不是必须的,因为 Spring Boot 框架会自动装配 RedisTemplate 对象,但是默认的key序列化器为JdkSerializationRedisSerializer,导致我们存到Redis中后的数据和原始数据有差别 如: 但是取是可以取出…

【免费】幻兽帕鲁Palworld服务器创建、32人专用服务器搭建

创建幻兽帕鲁服务器1分钟部署教程,阿里云和腾讯云均推出幻兽帕鲁服务器服务器和部署教程,4核16G和4核32G配置可选,阿腾云atengyun.com分享1分钟自建幻兽帕鲁Palworld服务器教程: 幻兽帕鲁服务器创建教程 幻兽帕鲁服务器官方推荐…

【Java网络编程03】网络原理进阶

【Java网络编程03】网络原理进阶 1. UDP协议 1.1 基本介绍 我们首先再来回顾UDP协议的基本特点: 无连接的不可靠传输的面向数据报的全双工的 既然谈到数据报,我们就来看一下UDP数据报的格式: UDP数据报分为报头和载荷部分,其…

网络协议与攻击模拟_09部署DHCP服务器

一、部署DHCP服务器 Windows server部署DHCP服务器 1、虚拟机网络架构理解 Vmware里面不同的虚拟机可以设置相同的Vmnet网络,也可以设置不同的Vmnet网络。两台虚拟机设置相同的Vmnet1网卡,可以看作为使用虚拟交换机将两台Vmnet1的虚拟机连接起来的。 …

OSPF协议解析及相关技术探索(C/C++代码实现)

OSPF(开放最短路径优先)是一种用于自治系统(AS)内部的路由协议,它是基于链路状态算法的。OSPF的设计目的是为了提供一种可扩展、快速收敛和高效的路由解决方案。 OSPF概念和特点 概念 自治系统(AS&#…

基于Docker、Minikube在PC端构建K8S试验环境

在桌面电脑上使用Docker和Minikube构建Kubernetes(K8S)试验环境,为学习和测试提供了一个理想的平台。Docker的容器化技术允许在隔离的环境中运行应用,而Minikube则简化了在单节点上部署和管理Kubernetes集群的过程。这种组合使得个…

Apache 辅助系统工具

一丶Apache Sqoop 1.Sqoop的介绍: Sqoop的工作机制是将导入或者导出的命令翻译成MapReduce实现,Sqoop可以理解为:SQL到Hadoop或者Hadoop到SQL 2.Sqoop的安装 配置文件修改: cd $SQOOP_HOME/conf mv sqoop-env-template.sh sqo…

C语言第八弹---一维数组

✨个人主页: 熬夜学编程的小林 💗系列专栏: 【C语言详解】 【数据结构详解】 一维数组 1、数组的概念 2、⼀维数组的创建和初始化 2.1、数组创建 2.2、数组的初始化 2.3、数组的类型 3、⼀维数组的使用 3.1、数组下标 3.2、数组元素…

从c到c++——4:引用

前言 在《水浒传》中,梁山一百零八好汉,每个人都有一个响亮的外号,比如,当我们提到李逵和提到黑旋风提到铁牛时,本质上我们指的是同一个人。黑旋风江州劫法场,那李逵,铁牛也有江州劫法场的经历。引用也是…

【3.6数据库系统】数据库备份与恢复技术

目录 1.数据备份1.1备份方式1.2备份类型 2.数据库故障与恢复 1.数据备份 1.1备份方式 △冷备份也称为静态备份,别是将数据库正常关闭,在停止状态下,将数据库的文件全部备份(复制)下来。 △热备份也称为动态备份,是利用备份软件&a…

E7数据库备份和恢复

E7数据库备份和恢复 一、实验目的 在Mysql上,学习如何备份数据库和恢复的各种方法。 二、实验要求: 1、基本硬件配置:英特尔Pentium III 以上,大于4G内存; 2、软件要求:Mysql; 3、时间:1小时; 4、撰写实验报告并按时提交。 三、…

常用MQ产品的对比

常用MQ产品的对比 本文整理了常用MQ之间的对比,旨在帮助大家在实际项目中选择MQ产品。 消息队列对比参照表 注: 对照表来自:消息队列对比参照表 ,对比维度比较全面,结果个人比较认同,强烈建议参考。 Rock…

【OCC学习23】使用Draw探索OCC API 【完结】

对于OCC应用开发者来说,OCC的文档虽然不错,但针对具体的需求找到合适的API还是得不断摸索。我发现看Draw的代码是探索OCC API使用的最佳路径。掌握根据Draw命令查找对应代码就能高效找到解决方案。所以这是本系列的最后一篇分享了,个人感觉OC…

TarGAN:多模态医学图像转换GAN

TarGAN 核心思想网络结构 核心思想 论文:https://arxiv.org/abs/2105.08993 代码:https://github.com/2165998/TarGAN 解决的问题:传统多模态医学图像转换通常,在生成高质量图像方面存在问题,特别是在关键目标区域或…