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

认识Axios

axios中文网

一. 为什么会诞生Axios

  1. 最初浏览器页面向服务器请求数据时,返回的是整个页面,整个页面都会刷新
  2. ajax的出现,它可以在页面无刷新的情况下请求数据
  3. 原生的XMLHttpRequest,jQuery封装的ajax,以及axios都可以实现异步的网络请求
  4. axios(相比于原生的XMLHttpRequest对象)简单易用,(相比于jQuery)axios包尺寸小且提供了易于扩展的接口,是专注于网络请求的库
  5. axios本质上是XMLHttpRequest的封装

二. Axios是什么

  • axios是一个基于Promise的网络请求库,可以用于浏览器和node.js
  • 简单来说就是可以发送get、post等请求
  • vue、react等框架的出现,促使axios轻量级库的出现。因为vue、react等不需要操作dom,所以不需要引入jquery.js了

三. axios与ajax的区别

理论区别:

  • axios是通过Promise实现对ajax的封装,就像jQuery对ajax的封装一样。ajax实现了页面局部的刷新,axios实现了对ajax的封装
  • axios是ajax,ajax不止axios,即axios是ajax的衍生

逻辑区别:

  • ajax 本身是一个针对MVC的编程
  • axios符合现在前端MVVM的浪潮

axios的特点:

  • 从浏览器创建XMLHttpRequest
  • 从node.js创建http请求
  • 支持Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御XSRF

四. axios请求的五种方式(get,post,put,patch,delete)

注:使用axios记得先安装它的依赖,并导入,此处省略

  • get:获取数据
  • post:提交数据(表单提交+文件上传)
  • put:更新数据(所有数据推送到后端)
  • patch:更新数据(只将更新的数据推送到后端)
  • delete:删除数据
// params 是将与请求一起发送的url参数,对应后台中的query
// data 是作为请求主体被发送的数据,对应后台中的body
axios.request(config)
axios.get(url[, config])  // 只支持 params 传参
axios.delete(url[, config])  // 只支持 params传参
axios.head(url[, config]) // 只支持 params传参
axios.post(url[, data[, config]]) // 同时支持  data 和 params
axios.put(url[, data[, config]]) // 同时支持  data 和 params
axios.patch(url[, data[, config]]) // 同时支持  data 和 params

使用方法:

1. get方法

<script>import axios from 'axios'export default {mounted () {axios.get('接口地址', {params: {}}).then((res) => {})}}
</script>

2. post方法

<script>import axios from 'axios'export default {mounted () {// 1.【参数为application/json请求方式】axios.post('接口地址', {}).then((res) => {})// 2.【参数为form-data请求方式的表单提交(图片上传/文件上传)】let data = { id: 12 }let formData = new formData()for (let key in data) {formData.append(key, data[key])}axios.post('接口地址', formData).then((res) => {})}}
</script>

3. put方法

<script>import axios from 'axios'export default {mounted () {axios.put('接口地址', {}).then((res) => {})}}
</script>

4. patch方法

<script>import axios from 'axios'export default {mounted () {axios.patch('接口地址', {}).then((res) => {})}}
</script>

5. delete方法

<script>import axios from 'axios'export default {mounted () {// 写法一axios.delete('接口地址', { params: {} }).then((res) => {})// 写法二axios.delete('接口地址', { data: {} }).then((res) => {})}}
</script>

五. axios拦截器的介绍

       1. axios拦截器的原理:

         网络请求 ——> axios ——> 请求拦截器 ——> 服务器

                                            ——> 响应拦截器 ——> 服务器

        2. 请求拦截器:主要处理token的统一注入问题

import axios from 'axios';
const axiosRequest = axios.create(); // 创建axios实例axiosRequest.interceptors.request.use(config => {// 有token修改token,没有token跳转登录if (store.getters.getToken !== '') {// 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改if(!config.headers['Authorization']){config.headers['Authorization'] = store.getters.getToken; // getToken();}} else {if (config.url.charAt('/login?') == -1) {window.location = '/login';}}                return config}, error => {return Promise.reject(error)
})

        3. 响应拦截器:主要处理返回的数据异常和数据结构的问题

import axios from 'axios';
const axiosRequest = axios.create(); // 创建axios实例axiosRequest.interceptors.response.use(response => {if (response && response.data && response.data.code == '401') {store.dispatch("setToken", "");if (messagetimeout) {clearTimeout(messagetimeout)messagetimeout = null}messagetimeout = setTimeout(function () {this.$message({type: 'error',message: '认证失效,请重新登录!',duration: 1000,onClose: function () {}})setTimeout(() => {let routeData = router.resolve({path: '/login',})location.href= routeData.href;}, 500)}, 500)return Promise.reject(response.data)}if (response && response.data && response.data.code == '20007') {                        this.$message({type: 'error',message: '此用户已在其他地方登陆! ',duration: 1000,onClose: function () {window.location = 'login';}})return Promise.reject(response.data)}if (response && response.data && !response.data.success && !isMobile) {if (typeof response.data == 'object' && !(response.data instanceof Blob)) {this.$message({type: 'error',message: response.data.message})}}
},async error => {// error 有response对象 configif (error.response && error.response.data && error.response.data.code === 10002) {// 后端告诉前端token超时了await store.dispatch('user/lgout') // 调用登出actionrouter.push('/login') // 跳到登录页}this.$message.error(error.message) // 提示错误return Promise.reject(error) // 传入一个错误的对象  就认为promise执行链 进入了catch  
})

六. async、await

  • async、await的用法

async getList () {let result = await axios.post('/getList', {id: 1})return result
}
  • async、await是什么

        1. async是用来声明一个方法是异步的

        2. await可以认为是async await的简写,是等待一个异步方法执行完成的

  • async、await的使用规则

  1. async表示这是一个async函数,await只能用在async函数的里面,不能单独使用
  2. async返回的是一个Promise对象,await是等待这个Promise返回结果后再执行
  3. await等待的也是一个Promise对象,后面必须跟一个Promise对象,但不必写then(),直接就可以得到返回值

相关文章:

认识Axios

axios中文网 一. 为什么会诞生Axios 最初浏览器页面向服务器请求数据时&#xff0c;返回的是整个页面&#xff0c;整个页面都会刷新ajax的出现&#xff0c;它可以在页面无刷新的情况下请求数据原生的XMLHttpRequest&#xff0c;jQuery封装的ajax&#xff0c;以及axios都可以实…...

系统架构设计专业技能 · 信息安全技术

系列文章目录 系统架构设计专业技能 网络技术&#xff08;三&#xff09; 系统架构设计专业技能 系统安全分析与设计&#xff08;四&#xff09;【系统架构设计师】 系统架构设计高级技能 软件架构设计&#xff08;一&#xff09;【系统架构设计师】 系统架构设计高级技能 …...

kafka晋升之路-理论+场景

kafka晋升之路 一&#xff1a;故事背景二&#xff1a;核心概念2.1 系统架构2.2 生产者&#xff08;Producer&#xff09;2.2.1 生产者分区2.2.2 生产者分区策略 2.3 经纪人&#xff08;Broker&#xff09;2.3.1 主题&#xff08;Topic&#xff09;2.3.2 分区&#xff08;Partit…...

(牛客网)链表相加(二)

嗯哼~ 题目 描述 假设链表中每一个节点的值都在 0 - 9 之间&#xff0c;那么链表整体就可以代表一个整数。 给定两个这种链表&#xff0c;请生成代表两个整数相加值的结果链表。 数据范围&#xff1a;0 ≤ n,m ≤ 1000000&#xff0c;链表任意值 0 ≤ val ≤ 9 要求&#x…...

Vs code 使用中的小问题

1.Java在Vs code 中使用单元测试失败或者如何使用单元测试 创建Java项目&#xff0c;或者将要测试的文件夹添加进工作区 要出现lib包&#xff0c;并有两个测试用的jar包 编写测试文件 public class TestUnit{ public static void main(String[] args) {String str "…...

vue2和vue3

1. 双向数据绑定原理发生了改变 vue2的双向数据绑定是利用了es5 的一个API Object.definepropert() 对数据进行劫持 结合发布订阅模式来实现的。vue3中使用了es6的proxyAPI对数据进行处理。 相比与vue2&#xff0c;使用proxy API 优势有&#xff1a;defineProperty只能监听某个…...

火山引擎ByteHouse:一套方案,让OLAP引擎在精准投放场景更高效

由于流量红利逐渐消退&#xff0c;越来越多的广告企业和从业者开始探索精细化营销的新路径&#xff0c;取代以往的全流量、粗放式的广告轰炸。精细化营销意味着要在数以亿计的人群中优选出那些最具潜力的目标受众&#xff0c;这无疑对提供基础引擎支持的数据仓库能力&#xff0…...

【论文阅读】SHADEWATCHER:使用系统审计记录的推荐引导网络威胁分析(SP-2022)

SHADEWATCHER: Recommendation-guided CyberThreat Analysis using System Audit Records S&P-2022 新加坡国立大学、中国科学技术大学 Zengy J, Wang X, Liu J, et al. Shadewatcher: Recommendation-guided cyber threat analysis using system audit records[C]//2022 I…...

Mac 使用 rar 命令行工具解压和压缩文件

在 Mac 中常遇到的压缩文件有 zip 和 rar 格式的&#xff0c;如果是 zip 格式的 Mac 系统默认双击一下文件就能直接解压了&#xff0c;但 rar 文件就不行。 需要额外下载 rar 工具了实现。 第一步&#xff1a;下载 rar 工具 工具网址&#xff1a;https://www.rarlab.com/dow…...

7.maven

1 初始Maven 1.1 什么是Maven Maven是Apache旗下的一个开源项目&#xff0c;是一款用于管理和构建java项目的工具。 官网&#xff1a;https://maven.apache.org/ Apache 软件基金会&#xff0c;成立于1999年7月&#xff0c;是目前世界上最大的最受欢迎的开源软件基金会&…...

MySQL 主从复制遇到 1590 报错

作者通过一个主从复制过程中 1590 的错误&#xff0c;说明了 MySQL 8.0 在创建用户授权过程中的注意事项。 作者&#xff1a;王祥 爱可生 DBA 团队成员&#xff0c;主要负责 MySQL 故障处理和性能优化。对技术执着&#xff0c;为客户负责。 本文来源&#xff1a;原创投稿 爱可生…...

games101-windows环境配置(CMake+vcpkg+VS2019)

下载工具 安装CMake 安装vcpkg 安装vs2019 安装 eigen3 opencv 在vcpkg安装目录下&#xff0c;使用Windows Power Shell运行下面脚本 .\vcpkg.exe install eigen3:x64-windows .\vcpkg.exe install opencv:x64-windows安装过程中可能会用红色字体提示&#xff1a;Failed to…...

2023年Java核心技术面试第五篇(篇篇万字精讲)

目录 十 . HashMap&#xff0c;ConcurrentHashMap源码解析 10.1 HashMap 的源码解析&#xff1a; 10.1.1数据结构&#xff1a; 10.1.2哈希算法&#xff1a; 10.1.3解决哈希冲突&#xff1a; 10.1.4扩容机制&#xff1a; 10.1.5如何使用 HashMap&#xff1a; 10.2 HashMap 关注…...

第十课:Qt 字符编码和中文乱码相关问题

功能描述&#xff1a;最全的 Qt 字符编码相关知识以及中文乱码的原因与解决办法 一、字符编码种类 ASCII 码 美国人对信息交流的编码&#xff0c;包括 26 个字母&#xff08;大小写&#xff09;、数字和标点符号等&#xff0c;用一个字节&#xff08;8 位&#xff09;表示这些…...

Go语言基础:Interface接口、Goroutines线程、Channels通道详细案例教程

目录标题 一、Interface1. Declaring and implementing an interface2. Practical use of an interface3. Nterface internal representation4. Empty interface5. Type assertion6. Type switch7. Implementing interfaces using pointer receivers VS value receivers8. Impl…...

Cesium加载ArcGIS Server4490且orgin -400 400的切片服务

Cesium在使用加载Cesium.ArcGisMapServerImageryProvider加载切片服务时&#xff0c;默认只支持wgs84的4326坐标系&#xff0c;不支持CGCS2000的4490坐标系。 如果是ArcGIS发布的4490坐标系的切片服务&#xff0c;如果原点在orgin X: -180.0Y: 90.0的情况下&#xff0c;我们可…...

Objectarx 2021使用vs2019生成报错 /RTCc rejects conformant code

error C2338: /RTCc rejects conformant code错误解决 使用VS2019/VS2022生成项目报错 严重性 代码 说明 项目 文件 行 禁止显示状态 错误 C1189 #error: /RTCc rejects conformant code, so it is not supported by the C Standard Library. Either remove this compiler opti…...

QT中使用QtXlsx库的三种方法 QT基础入门【Excel的操作】

对于Linux用户,如果Qt是通过“ apt-get”之类的软件包管理器工具安装的,请确保已安装Qt5开发软件包qtbase5-private-dev QtXlsx是一个可以读写Excel文件的库。它不需要Microsoft Excel,可以在Qt5支持的任何平台上使用。该库可用于从头开始生成新的.xlsx文件从现有.xlsx文件中…...

容器和云原生(二):Docker容器化技术

目录 Docker容器的使用 Docker容器关键技术 Namespace Cgroups UnionFS Docker容器的使用 首先直观地了解docker如何安装使用&#xff0c;并快速启动mysql服务的&#xff0c;启动时候绑定主机上的3306端口&#xff0c;查找mysql容器的ip&#xff0c;使用mysql -h contain…...

学习总结(TAT)

项目写完了&#xff0c;来写一个总的总结啦&#xff1a; 1.后期错误 Connection&#xff0c;Statement&#xff0c;Prestatement&#xff0c;ResultSet都要记得关闭接口&#xff1b;&#xff08;一定要按顺序关闭&#xff09;&#xff1b; 在写群聊的时候写数据库名的时候不要…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

springboot 日志类切面,接口成功记录日志,失败不记录

springboot 日志类切面&#xff0c;接口成功记录日志&#xff0c;失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...

沙箱虚拟化技术虚拟机容器之间的关系详解

问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西&#xff0c;但是如果把三者放在一起&#xff0c;它们之间到底什么关系&#xff1f;又有什么联系呢&#xff1f;我不是很明白&#xff01;&#xff01;&#xff01; 就比如说&#xff1a; 沙箱&#…...