认识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  
})

六. axios的封装

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

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

相关文章

我能“C”——数据的存储

目录 1. 数据类型介绍 1.1 类型的基本归类&#xff1a; 2. 整形在内存中的存储 2.1 原码、反码、补码 2.2 大小端介绍 2.3 练习 3. 浮点型在内存中的存储 3.1 一个例子 3.2 浮点数存储规则 1. 数据类型介绍 char // 字符数据类型 short // 短整…

解决多模块内核心模块有接口打包成jar后被依赖并调用遇到的问题(springcloud集成ruoyi.quartz)

项目准备开发个新功能&#xff0c;刚好很喜欢ruoyi写的任务调度&#xff0c;因此想到了集成ruoyi.quartz模块 &#xff0c;遇到了很多问题: 首先因为ruoyi.quartz模块依赖了ruoyi.common模块&#xff0c;因此第一步我需要把common模块一部分依赖项复制到了quartz模块内&#xf…

torch框架学习过程遇到问题

PyTorch框架 一些用法下划线后缀torch.nn.conv2d和torch.nn.functional.conv2d的区别 函数torch.函数名scatter函数 其他模型的不同模式:train,eval,infer读取和保存tensor 一些用法 下划线后缀 在 PyTorch 中&#xff0c;使用下划线后缀的函数通常表示就地修改&#xff08;i…

Selenium的使用:WEB功能测试

Selenium是ThrougthWorks公司一个强大的开源WEB功能测试工具系列&#xff0c;本系统包括多款软件 Selenium语言简单&#xff0c;用(Command,target,value)三种元素组成一个行为&#xff0c;并且有协助录制脚本工具&#xff0c;但Selenese有一些严格的限制&#xff1a; …

深入浅出Pytorch函数——torch.nn.init.calculate_gain

分类目录&#xff1a;《深入浅出Pytorch函数》总目录 相关文章&#xff1a; 深入浅出Pytorch函数——torch.nn.init.calculate_gain 深入浅出Pytorch函数——torch.nn.init.uniform_ 深入浅出Pytorch函数——torch.nn.init.normal_ 深入浅出Pytorch函数——torch.nn.init.c…

创建和运行 Ansible 临时命令

创建和运行 Ansible 临时命令 作为系统管理员&#xff0c;您需要在受管节点上安装软件。 请按照正文所述&#xff0c;创建一个名为 /home/curtis/ansible/adhoc.sh 的 shell 脚本&#xff0c;该脚本将使用 Ansible 临时命令在各个受管节点上安装 yum 存储库&#xff1a; 存储库…

mysql的隐式连接和显式连接的区别

隐式连接&#xff08;Implicit Join&#xff09;和显式连接&#xff08;Explicit Join&#xff09;是 SQL 查询中用于联结多个表的两种不同语法方式。它们的区别主要体现在语法的书写风格和可读性上。 隐式连接&#xff1a; 隐式连接使用逗号 , 将多个表名放在 FROM 子句中&am…

k8s的pv和pvc创建

//NFS使用PV和PVC 1、配置nfs存储 2、定义PV 实现 下图的pv和pvc测试 pv的定义 这里定义5个PV&#xff0c;并且定义挂载的路径以及访问模式&#xff0c;还有PV划分的大小 vim /pv.yamlapiVersion: v1 kind: PersistentVolume metadata:name: pv001 spec:capacity:storage: …

TiDB数据库从入门到精通系列之四:SQL 基本操作

TiDB数据库从入门到精通系列之四&#xff1a;SQL 基本操作 一、SQL 语言分类二、查看、创建和删除数据库三、创建、查看和删除表四、创建、查看和删除索引五、记录的增删改六、查询数据七、创建、授权和删除用户 成功部署 TiDB 集群之后&#xff0c;便可以在 TiDB 中执行 SQL 语…

● 1143.最长公共子序列 ● 1035.不相交的线 ● 53. 最大子序和 动态规划

1143.最长公共子序列 class Solution { public:int longestCommonSubsequence(string text1, string text2) {int res0;vector<vector<int>> dp(text1.size() 1, vector<int>(text2.size() 1, 0));for (int i 1; i < text1.size(); i) {for (int j 1…

Linux网络编程(epoll的ET模式和LT模式)

文章目录 前言一、ET模式和LT模式概念讲解1.水平触发模式&#xff08;LT&#xff0c;Level-Triggered&#xff09;2.边缘触发模式&#xff08;ET&#xff0c;Edge-Triggered&#xff09; 二、边缘触发和水平触发适用的场景总结 前言 本篇文章主要来讲解epoll的ET模式和LT模式&…

原型和原型链

好久没记了有点忘记了&#xff0c;来记录一下。 1、函数和对象的关系&#xff1a;对象都是通过函数创建的&#xff0c;函数也是一个对象。 2、原型和原型链 1.原型&#xff1a;原型分为两种 prototype&#xff1a;每一个函数都会有prototype属性&#xff0c;它指向函数的原型…

Three.js程序化3D城市建模【OpenStreetMap】

对于我在 Howest 的研究项目&#xff0c;我决定构建一个 3D 版本的 Lucas Bebber 的“交互式讲故事的动画地图路径”项目。 我将使用 OSM 中的矢量轮廓来挤出建筑物的形状并将它们添加到 3js 场景中&#xff0c;随后我将对其进行动画处理 推荐&#xff1a;用 NSDT编辑器 快速搭…

C++坦克大战源代码

源码: #include <iostream> #include <time.h> #include <windows.h>#define W 1 //上 #define S 2 //下 #define A 3 //左 #define D 4 //右 #define L 5 // 坦克有4条命void HideCursor() { //隐藏光标 …

Flask-flask系统运行后台轮询线程

对于有些flask系统&#xff0c;后台需要启动轮询线程&#xff0c;执行特定的任务&#xff0c;以下是一个简单的例子。 globals/daemon.py import threading from app.executor.ops_service import find_and_run_ops_task_todo_in_redisdef context_run_func(app, func):with …

【会议征稿信息】第二届信息学,网络与计算技术国际学术会议(ICINC2023)

2023年第二届信息学&#xff0c;网络与计算技术国际学术会议(ICINC2023) 2023 2nd International Conference on Informatics,Networking and Computing (ICINC 2023) 2023年第二届信息学&#xff0c;网络与计算技术国际学术会议(ICINC2023)将于2023年10月27-29日于中国武汉召…

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

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

.NET Core6.0使用NPOI导入导出Excel

一、使用NPOI导出Excel //引入NPOI包 HTML <input type"button" class"layui-btn layui-btn-blue2 layui-btn-sm" id"ExportExcel" onclick"ExportExcel()" value"导出" />JS //导出Excelfunction ExportExcel() {…

aardio开发语言Excel数据表读取修改保存实例练习

import win.ui; /*DSG{{*/ var winform win.form(text"aardio form";right759;bottom479) winform.add( buttonEnd{cls"button";text"末页";left572;top442;right643;bottom473;z6}; buttonExcelRead{cls"button";text"读取Exce…

迷路的机器人(递归回溯+动态规划两个方法实现)

题目&#xff1a; 设想有个机器人坐在一个网格的左上角&#xff0c;网格 r 行 c 列。机器人只能向下或向右移动&#xff0c;但不能走到一些被禁止的网格&#xff08;有障碍物&#xff09;。设计一种算法&#xff0c;寻找机器人从左上角移动到右下角的路径。 示例&#xff1a;…