当前位置: 首页 > news >正文

“超越传统的HTTP请求:深度解析Axios,打造前端开发的终极利器“

  

解锁前端开发的新境界 - 深入探索Axios,构建卓越的互联网应用

在当今数字化世界中,互联网应用的需求日益增长,而无论是大型企业还是初创公司,都需要一个强大而可靠的工具来处理与后端服务器之间的通信。这就是Axios的光辉时刻。作为前端开发者,你肯定想了解如何精确地发起HTTP请求、处理响应、拦截错误和优化性能。

幸运的是,本文将带你踏上一场关于Axios的深度探索之旅。我们将揭开Axios的神秘面纱,学习如何使用它的简洁且优雅的API,以及如何利用其强大的功能构建卓越的互联网应用。无论你是经验丰富的开发者还是初学者,这篇文章将为你提供宝贵的见解和技巧,助你在前端开发的道路上更进一步。

准备好迎接前端开发的新挑战了吗?让我们一同探索Axios的奥秘,为你的互联网应用注入更多的效率和高质量!

 

普通搭建

安装依赖

安装axios

cnpm install --save axios



安装querystring

cnpm install --save querystring


        

引入

局部引入

import axios from "axios"



全局引入【app.config.globalProperties】
main.js

import axios from "axios"
app.config.globalProperties.$axios = axios


组件使用

import { getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance();
proxy.$axios.get()..



全局引入【利用Provide和Inject】
main.js

import axios from "axios"
app.provide("axios",axios)


组件使用

import { inject } from "vue"
const axios = i


          

使用

get请求

axios.get("xxx").then(res => {console.log(res.data)}).catch(error => {console.log(error)})



get请求【带参】

axios.get("xxx", {params: {age: "1"}
})



post请求

axios.post("xxx", qs.stringify({id: "1",
}))

封装搭建

安装依赖

安装axios

cnpm install --save axios



安装querystring

cnpm install --save querystring


        
    
        

封装axios

src / api / request.js

import axios from "axios"
import qs from "querystring"/*** 创建Axios对象*/
const instance = axios.create({//baseURL: "http://localhost:8030",baseURL: "http://118.31.60.184:8030",timeout: 5000,//配置5s超时withCredentials: true//访问允许携带cookie
})
/*** 响应失败处理器*/
const errorHandle = (status, info) => {switch (status) {case 400:console.log("语义错误");break;case 401:console.log("服务器认证失败");break;case 403:console.log("服务器请求拒绝执行");break;case 404:console.log("请检查网路请求地址");break;case 500:console.log("服务器发生意外");break;case 502:console.log("服务器无响应");break;default:console.log(info);break;}
}
/*** 请求拦截器*/
instance.interceptors.request.use(config => {if (config.method === 'post') {// POST接收的网络请求参数需要进行格式转化config.data = qs.stringify(config.data)}return config},error => Promise.reject(error)
)
/*** 响应拦截器*/
instance.interceptors.response.use(response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response),error => {const {response} = error;if (response) {errorHandle(response.status, response.info)} else {console.log("网络请求失败");}}
)export default instance        

封装接口

src / api / index.js

import axios from "./request"const permission = {search: "/sys/permission/search",add: "/sys/permission/add",update: "/sys/permission/update",delete: "/sys/permission/delete",findById: "/sys/permission/findById",
}
const api = {permission_search(params) {return axios.get(permission.search, {params})},permission_add(params) {return axios.post(permission.add, params)},permission_update(params) {return axios.post(permission.update, params)},permission_delete(params) {return axios.delete(permission.delete, {params})},permission_findById(params) {return axios.get(permission.findById, {params})}
}
export default api            

使用

引入

import axios from "../../api/index.js"



使用

axios.permission_search({search: search,page: page,size: size
})
axios.permission_add({permissionName: addFormInfo.permissionName,permissionDesc: addFormInfo.permissionDesc,
})
axios.permission_findById({pid: row.pid
})
axios.permission_update({pid: editorFormInfo.pid,permissionName: editorFormInfo.permissionName,permissionDesc: editorFormInfo.permissionDesc,
})
axios.permission_delete({pid: row.pid
})


          

相关文章:

“超越传统的HTTP请求:深度解析Axios,打造前端开发的终极利器“

解锁前端开发的新境界 - 深入探索Axios,构建卓越的互联网应用 在当今数字化世界中,互联网应用的需求日益增长,而无论是大型企业还是初创公司,都需要一个强大而可靠的工具来处理与后端服务器之间的通信。这就是Axios的光辉时刻。作…...

【Tomcat】tomcat的多实例和动静分离

多实例: 在一台服务器上有多台Tomcat;就算是多实例 安装telnet服务,可以用来测试端口通信是否正常 yum -y install telnettelnet 192.168.220.112 80 tomcat的日志文件 cd /usr/local/tomcat/logsvim catalina.out Tomcat多实例部署&…...

Python爬虫IP代理池的建立和使用

写在前面 建立Python爬虫IP代理池可以提高爬虫的稳定性和效率,可以有效避免IP被封锁或限制访问等问题。 下面是建立Python爬虫IP代理池的详细步骤和代码实现: 1. 获取代理IP 我们可以从一些代理IP网站上获取免费或付费的代理IP,或者自己租…...

Java面试题(dubbo)

目录 什么是dubbo?为什么要用? dubbo的使用场景和核心功能? dubbo核心组件 dubbo服务注册与发现的流程 dubbo与spring的关系 dubbo与springCloud的区别 dubbo有哪些注册中心? dubbo使用的什么通讯框架? dubbo…...

JVM源码剖析之Caused by: java.lang.OutOfMemoryError: GC overhead limit exceeded异常

写在前面: 版本信息: jdk版本:jdk8u40 垃圾回收器:ParallelScavenge new/old最近在群里看到有一位老哥拿着异常信息到处问,而发生的就是java.lang.OutOfMemoryError: GC overhead limit exceeded异常,恰好…...

使用PDF文件入侵任何操作系统

提示:我们8月28号开学,所以我得快点更新了,不能拖了😥 文章目录 前言一、打开终端总结 前言 PDF文件被广泛应用于共享信息,电子邮件,网站或文档或存储系统的真实链接 它可以用于恶意软件的载体。 不要问我什么意思&am…...

强训第32

选择 D B A A 发送TCP意思应该是已经建立了连接,会超时重传。在未建立连接的时候,会放弃该链接 C A 80端口是http A 交换机攻击主要有五种:VLAN跳跃攻击 生成树攻击 MAC表洪水攻击 ARP攻击 VTP攻击 B A 2^(32-26)2^(32-27)2^(32-27)128 减去…...

vue3 setup+Taro3 调用原生小程序自定义年月日时分多列选择器,NutUI改造

vue3 setupTaro3 调用原生小程序自定义年月日时分多列选择器&#xff0c;NutUI改造 NutUI 有日期时间选择器&#xff0c;但是滑动效果太差&#xff0c;卡顿明显。换成 原生小程序 很顺畅 上代码&#xff1a; <template><view><pickermode"multiSelector&…...

git命令使用

君子拙于不知己,而信于知己。——司马迁 清屏&#xff1a;clear 查看当前面板的路径&#xff1a;pwd 查看当前面板的文件&#xff1a;ls 创建文件夹&#xff1a;mkdir 文件夹名 创建文件&#xff1a;touch 文件名 删除文件夹&#xff1a;rm -rf 文件夹名 删除文件&#xff1a;r…...

每日记--前端解决方案--el-select下拉样式-el-option内容过长-鼠标悬停到文字不修改光标样式-设置透明

文章目录 el-select下拉样式el-select中el-option内容过长解决办法鼠标悬停到文字不修改光标样式设置透明 el-select下拉样式 element-ui自带样式设置popper-class el-select中el-option内容过长解决办法 问题&#xff1a;像这样选项太长了&#xff0c;不好看 解决&#xf…...

Windows系统Git安装教程(详细Git安装过程)

获取Git安装程序 到Git官网下载&#xff0c;网站地址&#xff1a;https://git-scm.com/downloads&#xff0c;如下图&#xff1a; 因为我们是用Windows系统上的浏览器访问的&#xff0c;Git官网自动之别到了我使用的操作系统&#xff0c;所以右侧直接显示下载使用Windows系统的…...

前后端分离------后端创建笔记(11)用户删除

B站视频&#xff1a;30-用户删除&结束语_哔哩哔哩_bilibili 1、现在我们要做一个删除的功能 1.1 首先做一个删除的功能接口&#xff0c;第一步先来到后端&#xff0c;做一个删除的接口 2、删除我们用Delete请求 3、方法名我给他改一下 3.1这里给他调一下删除方法&#xf…...

24、springboot的自动配置01--类条件注解@ConditionalOnClass、bean条件注解@ConditionalOnBean

springboot的自动配置 ★ 自动配置 Spring Boot的自动配置通常可根据依赖库自动触发——当Spring Boot检测到项目中包含某些框架的JAR包时&#xff0c;Spring Boot就会触发自动配置。其实通过EnableAutoConfiguration注解来启动▲ 其实你用到SpringBootApplication&#xff0…...

婚恋交友h5多端小程序开源版开发

婚恋交友h5多端小程序开源版开发 以下是婚恋交友H5多端小程序的功能列表&#xff1a; 用户注册和登录&#xff1a;用户可以通过手机号码或第三方账号注册和登录。个人信息填写&#xff1a;用户可以填写个人基本信息&#xff0c;包括姓名、性别、年龄、身高、体重、学历、职业等…...

uniapp案例30余种实战项目

uniapp案例30余种实战项目 mpvue框架仿滴滴出行didi-masteruni-app自定义导航栏title-customvue-mpvue-ChatRobot聊天机器人vue-mpvue-ChatRobot-master一款播课类小程序, 基于 mpvue 构建mp-podcast-mpvue-mastermpVue高仿美团小程序教程mpvue-meituan-masteruni-app 二维码生…...

回归预测 | MATLAB实现GRNN广义回归神经网络多输入多输出预测

回归预测 | MATLAB实现GRNN广义回归神经网络多输入多输出预测 目录 回归预测 | MATLAB实现GRNN广义回归神经网络多输入多输出预测预测效果基本介绍程序设计往期精彩参考资料 预测效果 基本介绍 MATLAB实现GRNN广义回归神经网络多输入多输出预测&#xff0c;输入10个特征&#x…...

从零开始学习VBA(一)

前置配置设置 首先配置开发设置&#xff08;不同版本的配置方法会有差异&#xff0c;可根据自己使用的EXCEL版本到网络上找对应的方法&#xff0c;比如直接搜索Excel2010 开发工具&#xff09; 以下为excel2016配置方法&#xff1a; 操作路径&#xff1a;文件-选项-自定义功…...

Kotlin Executors线程池newSingleThreadExecutor单线程

Kotlin Executors线程池newSingleThreadExecutor单线程 import java.util.concurrent.Executorsfun main() {val mExecutorService Executors.newSingleThreadExecutor()for (i in 1..5) {mExecutorService.execute {println("seq-$i tid:${Thread.currentThread().threa…...

ZooKeeper介绍

ZooKeeper是一个开放源代码的分布式协调服务。ZooKeeper的设计目标是将那些复杂且容易出错的分布式一致性服务封装起来&#xff0c;构成一个高效可靠的原语集&#xff0c;并以一系列简单易用的接口提供给用户使用。 ZooKeeper是一个典型的分布式数据一致性的解决方案&#xff0…...

首起针对国内金融企业的开源组件投毒攻击事件

简述 2023年8月9日&#xff0c;墨菲监控到用户名为 snugglejack_org (邮件地址&#xff1a;SnuggleBearrxxhotmail.com&#xff09;的用户发布到 NPM 仓库中的 ws-paso-jssdk 组件包具有发向 https://ql.rustdesk[.]net 的可疑流量&#xff0c;经过确认该组件包携带远控脚本&a…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

消息队列系统设计与实践全解析

文章目录 &#x1f680; 消息队列系统设计与实践全解析&#x1f50d; 一、消息队列选型1.1 业务场景匹配矩阵1.2 吞吐量/延迟/可靠性权衡&#x1f4a1; 权衡决策框架 1.3 运维复杂度评估&#x1f527; 运维成本降低策略 &#x1f3d7;️ 二、典型架构设计2.1 分布式事务最终一致…...

C++实现分布式网络通信框架RPC(2)——rpc发布端

有了上篇文章的项目的基本知识的了解&#xff0c;现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...

yaml读取写入常见错误 (‘cannot represent an object‘, 117)

错误一&#xff1a;yaml.representer.RepresenterError: (‘cannot represent an object’, 117) 出现这个问题一直没找到原因&#xff0c;后面把yaml.safe_dump直接替换成yaml.dump&#xff0c;确实能保存&#xff0c;但出现乱码&#xff1a; 放弃yaml.dump&#xff0c;又切…...