Axios简单说明,快速上手

Ajax:异步的JavaScript和XML

作用:

  1. 数据交换
  2. 异步交互

Axios:就是对原生Ajax进行封装,简化书写,快速开发 

使用逻辑: 

首先要安装Axios,可以通过npm在项目中安装:

  1. 打开命令行工具,进入项目根目录
  2. 运行以下命令来安装Axios:
npm install axios
  1. 安装完成后,你可以在项目中引入Axios来发送HTTP请求。在JavaScript文件中引入Axios的方法如下:
const axios = require('axios');

或者如果你是在浏览器环境中使用Axios,你可以通过<script>标签引入CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

这样就可以开始使用Axios来发送网络请求了。

  axios({method:'GET',url:"http://localhost:3000/api/data"}).then((result)=>{           //成功回调函数console.log(result.data);}).catch((err)=>{             //失败回调函数alert(err);});

method:请求方式,GET/POST....
url:请求路径
data:请求数据(POST)
params :发送请求时携带的url参数 如:...?key=val

Axios-请求方式别名 

为了方便起见,Axios已经为所有支持的请求方法提供了别名

在Axios中,可以通过提供不同的方法来发送不同类型的HTTP请求。下面是一些常用的Axios请求别名方法:

axios.request(config):发送自定义请求,可以定义请求的方法、URL、请求头、请求体等配置。

axios.request({method: 'post',url: 'https://api.example.com/custom_request',data: {key: 'value'}
})
.then(response => {console.log(response.data);
})
.catch(error => {console.error(error);
});

axios.get(url[, config]):发送GET请求,配置可以包括params、headers等。

axios.get('https://api.example.com/get_data', { params: { id: 123 } })
.then(response => {console.log(response.data);
})
.catch(error => {console.error(error);
});

axios.delete(url[, config]):发送DELETE请求,可以设置URL和请求配置。

axios.delete('https://api.example.com/delete_data', { params: { id: 456 } })
.then(response => {console.log(response.data);
})
.catch(error => {console.error(error);
});

axios.post(url[, data[, config]]):发送POST请求,同时可以传递请求体数据和配置。

axios.post('https://api.example.com/post_data', { key: 'value' }, { headers: { 'Content-Type': 'application/json' } })
.then(response => {console.log(response.data);
})
.catch(error => {console.error(error);
});

axios.put(url[, data[, config]]):发送PUT请求,可以传递URL、请求体数据和配置。

axios.put('https://api.example.com/put_data', { key: 'value' })
.then(response => {console.log(response.data);
})
.catch(error => {console.error(error);
});

通过使用这些请求别名方法,你可以更加方便地发送不同类型的HTTP请求。

输出先后顺序:

       原因:Ajax是异步请求

解决方法:

 异步同步化(让代码从上往下按顺序执行)

 可以通过async、await可以让异步变为同步操作。async就是来声明一个异步方法,await是用来等待异步任务执行

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

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

相关文章

模型评估——acc、P、R、F值、交叉验证、K折交叉验证

模型评估&#xff1a;对预测函数地预测精度的评估。 多重回归&#xff1a;涉及三个及其以上的变量的回归问题。 评估模型的方法&#xff1a; 交叉验证&#xff1a;将数据集分成测试集和训练集&#xff0c;可以采用3&#xff1a;7或者2&#xff1a;8的比例方式进行划分&#xff…

【Godot】Window类

&#xff08;参考自deepseek回答&#xff09; 在 Godot 引擎中&#xff0c;Window 是一个用于管理应用程序窗口的类。它是 Godot 4.0 引入的新特性&#xff0c;取代了旧版本中的 OS 类对窗口的管理功能。Window 提供了对窗口大小、位置、标题、模式等属性的控制&#xff0c;使开…

JVM 2015/3/15

定义&#xff1a;Java Virtual Machine -java程序的运行环境&#xff08;java二进制字节码的运行环境&#xff09; 好处&#xff1a; 一次编写&#xff0c;到处运行 自动内存管理&#xff0c;垃圾回收 数组下标越界检测 多态 比较&#xff1a;jvm/jre/jdk 常见的JVM&…

git submodule

git submodule git submodule 的作用是将一个 git 仓库&#xff0c;最为另一个 git 仓库的子模块 比如 A 仓库地址&#xff1a;gitgithub.com:xxxxxxx/A.git B 仓库地址&#xff1a;gitgithub.com:xxxxxxx/B.git 一、克隆 A 仓库 打开拉取的 A 项目根目录 在 A 项目中添加 …

Compose 实践与探索九 —— DrawModifier 解析

本篇讲解 DrawModifier 的基本用法与代码原理&#xff0c;介绍原理的目的在于可以判断绘制与绘制的关系&#xff0c;绘制与布局的关系。知道达成某种绘制效果应该怎么写&#xff0c;面对复杂的 Modifier 链时对效果有大致预判。 DrawModifier 管理绘制&#xff0c;需要以负责管…

华为手机助手输入连接码时光标乱跳

问题复现&#xff1a;输入12345678&#xff0c;光标自动跳转导致连接码出现乱序情况。 千万别试着找出规律&#xff0c;已试动态规律非大牛误轻试 问题原因&#xff1a; 想啥呢&#xff1f;华哥的软件又不是我开发我要Know Why干啥 我只需关心解决方案 &#xff08;可能时输入…

《DeepSeek 开源 DeepGEMM:开启AI计算新时代的密钥》:此文为AI自动生成

《DeepSeek 开源 DeepGEMM&#xff1a;开启AI计算新时代的密钥》&#xff1a;此文为AI自动生成 引言&#xff1a;AI 计算的新曙光 在当今科技飞速发展的时代&#xff0c;人工智能&#xff08;AI&#xff09;无疑是最为耀眼的领域之一。从语音助手到自动驾驶&#xff0c;从图像…

Windows 11 安装Docker Desktop环境

1、确认CPU开启虚拟化 打开任务管理器&#xff0c;切换到“性能”选项卡&#xff0c;查看 CPU 信息。若“虚拟化”状态显示为“已启用”&#xff0c;则表示虚拟化已开启&#xff1b;若显示为“已禁用”&#xff0c;则需要在启动时进入 BIOS 开启虚拟化设置&#xff08;若显示已…

STM32如何精准控制步进电机?

在工业自动化、机器人控制等场合&#xff0c;步进电机以其高精度、开环控制的特性得到了广泛应用。而在嵌入式系统中&#xff0c;使用STM32进行步进电机的精确控制&#xff0c;已成为开发者的首选方案之一。 本文将从嵌入式开发者的角度&#xff0c;深入探讨如何基于STM32 MCU…

【 <一> 炼丹初探:JavaWeb 的起源与基础】之 JavaWeb 项目的部署:从开发环境到生产环境

<前文回顾> 点击此处查看 合集 https://blog.csdn.net/foyodesigner/category_12907601.html?fromshareblogcolumn&sharetypeblogcolumn&sharerId12907601&sharereferPC&sharesourceFoyoDesigner&sharefromfrom_link <今日更新> 一、开发环境…

深度学习CNN特征提取与匹配

‌一、CNN特征提取核心方法‌ ‌基础网络架构‌ 使用卷积神经网络&#xff08;如ResNet、VGG、MobileNet&#xff09;提取多层特征图&#xff0c;通过卷积层自动学习图像的局部纹理、形状及语义信息‌。 ‌浅层特征‌&#xff1a;边缘、角点等低级特征&#xff08;Conv1-3&…

Vuex 高级技巧与最佳实践

使用 map 辅助函数简化代码&#xff1a; javascript import { mapState, mapGetters } from vuexexport default {computed: {...mapState([num]),...mapGetters([doubleNum])} }模块化开发&#xff1a; javascript // modules/student.js export default {namespaced: true,st…

算法题(98):大数加法

审题&#xff1a; 本题需要我们解决大数加法&#xff0c;大数直接运算会超出范围&#xff0c;所以我们需要转换成字符串一位位进行计算 思路&#xff1a; 方法一&#xff1a;高精度加法 我们将两个大数的每一个位分别计算&#xff0c;然后头插到answer字符串中即可 解题&#x…

C# Exe + Web 自动化 (BitComet 绿灯 自动化配置、设置)

BitComet GreenLight,内网黄灯转绿灯 (HighID), 增加p2p连接率提速下载-CSDN博客 前两天写个这个&#xff0c;每次开机关机后要重来一遍很麻烦的索性写个自动化。 先还是按照上面的教程自己制作一遍&#xff0c;留下Luck 以及 路由器相关的 端口记录信息。 &#xff08;因为自…

基于 Docker 搭建 FRP 内网穿透开源项目

有些配置项不知道该不该用,不知道该在哪用,不知道怎么用,所以我自己写个文章简单记录一下做个笔记 本文介绍的是基于 Docker 运行 frps 和 frpc,并通过 TCP 协议简单穿透 SSH 和 HTTP,在观看本文之前请确保你的机器已经安装 Docker 服务端搭建 frps# 连接拥有公网 IP 的…

python---序列 (str,list,tuple)

一、 序列类型入门 python的数据类型&#xff1a;int float bool str 运算符 - * / % > < and or not 流程控制ifelsewhilefor掌握python的2大容器类型数值类型&#xff08;3个&#xff09;&#xff1a;int float bool序列类型容器(3个)&#xff1a;str &#xff1a; …

CSS元素层叠顺序规则

CSS元素层叠顺序规则 看图说话总结: background/borderz-index(<0)blockfloatinline/inline-blockz-index(0,auto)z-index (>0)

删除有序数组中的重复项(26)

26. 删除有序数组中的重复项 - 力扣&#xff08;LeetCode&#xff09; 解法&#xff1a; class Solution { public:int removeDuplicates(vector<int>& nums) {auto first nums.begin();auto last nums.end();auto result first;if (first last) {return std::…

Vue 概念、历史、发展和Vue简介

一、Vue概念 官方定义&#xff1a; 渐进式JavaScript 框架&#xff0c;易学易用&#xff0c;性能出色&#xff0c;适用场景丰富的 Web 前端框架。 Vue.js 是一个流行的前端JavaScript框架&#xff0c;由尤雨溪&#xff08;Evan You&#xff09;开发并维护。 它最初于2014年发…

ArcGIS Pro将有文字标注底图切换为无标注底图(在线地图图源)

今天介绍一下在ArcGIS Pro将有标注的地形底图换成无标注的底图。 大家在这项目底图时候会经常调用ArcGIS Pro自带的地形图&#xff0c;但是这个地形图自带是有注记的&#xff0c;如下图。 如何更改&#xff0c;才可以调用无文字注记的呢&#xff1f; 对于一个已经切好图的有注记…