Axios 使用教程

Axios 是什么?

Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

特性

  • 从浏览器创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 超时处理
  • 查询参数序列化支持嵌套项处理
  • 自动将请求体序列化为:
    • JSON (application/json)
    • Multipart / FormData (multipart/form-data)
    • URL encoded form (application/x-www-form-urlencoded)
  • 将 HTML Form 转换成 JSON 进行请求
  • 自动转换JSON数据
  • 获取浏览器和 node.js 的请求进度,并提供额外的信息(速度、剩余时间)
  • 为 node.js 设置带宽限制
  • 兼容符合规范的 FormData 和 Blob(包括 node.js)
  • 客户端支持防御XSRF

安装

使用 jsDelivr CDN:

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

使用 unpkg CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 使用

<script>// 发起一个post请求axios({method: 'post',url: '/user/login',data: {username: 'wxw9868',password: '1234569'}}).then(function (response) {console.log(response);console.log(response.data);console.log(response.status);console.log(response.statusText);console.log(response.headers);console.log(response.config);}).catch(function (error) {console.log(error);if (error.response) {// 请求成功发出且服务器也响应了状态码,但状态代码超出了 2xx 的范围console.log(error.response.data);console.log(error.response.status);console.log(error.response.headers);} else if (error.request) {// 请求已经成功发起,但没有收到响应// `error.request` 在浏览器中是 XMLHttpRequest 的实例,// 而在node.js中是 http.ClientRequest 的实例console.log(error.request);} else {// 发送请求时出了点问题console.log('Error', error.message);}console.log(error.config);});axios.post('/user/login', {username: 'wxw9868',password: '123456'}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});
</script>

参考链接

AXIOSicon-default.png?t=N7T8https://axios-http.com/zh/

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

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

相关文章

【ZZULIOJ】1046: 奇数的乘积(Java)

目录 题目描述 输入 输出 样例输入 Copy 样例输出 Copy code 题目描述 给你n个整数&#xff0c;求他们中所有奇数的乘积。 输入 第一个数为n&#xff0c;表示本组数据一共有n个&#xff0c;接着是n个整数&#xff0c;你可以假设每组数据必定至少存在一个奇数。 输出…

五年经验,还不懂小表驱动大表

小表驱动大表&#xff0c;也就是说用小表的数据集驱动大表的数据集。假如有order和user两张表&#xff0c;其中order表有10000条数据&#xff0c;而user表有100条数据。 这时如果想查一下&#xff0c;所有有效的用户下过的订单列表。可以使用in关键字实现&#xff1a; select…

软件设计师——数据库

数据库 三级模式两级映像关系模型基本术语关系模型中的关系完整性约束 三级模式两级映像 概念模式&#xff08;也称模式&#xff09;对应基本表 外模式&#xff08;也称用户模式或子模式&#xff09;对应视图 内模式&#xff08;也称存储模式&#xff09;对应存储文件 两级映像…

Linux 5.10 Pstore 功能测试

目录 简介环境配置内核配置参考备注 简介 Pstore(Persistent store support)是用于系统发生oops或panic时&#xff0c;自动保存内核log buffer中的日志。随着功能不断完善&#xff0c;Duo S使用Linux 5.10已经支持保存console日志、ftrace消息和用户空间日志的收集&#xff0c…

Transformer架构顶层应用的基础知识

Transformer架构自从2017年被提出以来&#xff0c;已经在自然语言处理&#xff08;NLP&#xff09;和其他领域成为了一种革命性的模型结构。它不仅在各种NLP任务中取得了突破性的表现&#xff0c;也被扩展应用于图像处理、音频处理等领域。理解Transformer架构及其顶层应用的基…

Java基于SpringBoot+Vue的专家医院预约挂号系统,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

Android Framework学习笔记(2)----系统启动

Android系统的启动流程 启动过程中&#xff0c;用户可控部分是framework的init流程。init是系统中的第一个进程&#xff0c;其它进程都是它的子进程。 启动逻辑源码参照&#xff1a;system/core/init/main.cpp 关键调用顺序&#xff1a;main->FirstStageMain->SetupSel…

题目:宏#define命令练习(3)

题目&#xff1a;宏#define命令练习(3)    There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence. The blog content is all parallel goods. Those who are worried about being cheated should…

顺序表(1)——顺序表详解

什么是数据结构&#xff1f; 简单来说数据结构就是计算机储存&#xff0c;组织数据的方式&#xff0c;而数组就是最基础的数据结构。 那为什么会有数据结构的存在呢&#xff1f; 这需要将数据结构分成数据和结构两部分进行分析。 数据&#xff1a;我们在计算机屏幕上所看见的文…

【LeetCode: 572. 另一棵树的子树 + 二叉树 + dfs】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

spring事务那些事

实际工作中还会面临千奇百怪的问题&#xff0c;看下面返个例子&#xff08;注意MySql数据库测试&#xff09;&#xff1a; //1.hello1Service 调用 hello2Service Transactional(propagation Propagation.REQUIRED,rollbackFor Exception.class) public void doUpdate() {//…

深入解析:链游、DApp、公链、NFT与交易所开发的全景图

随着数字货币和区块链技术的迅速发展&#xff0c;链游开发、DApp开发、公链开发、NFT开发以及交易所开发等领域吸引了越来越多的关注。本文将以3000字的篇幅&#xff0c;对这些领域进行详细解析&#xff0c;探讨它们的意义、应用场景以及未来发展趋势。 链游开发&#xff08;Bl…

LwIP TCP/IP

LWIP 架构 LwIP 符合 TCP/IP 模型架构&#xff0c;规定了数据的格式、传输、路由和接收&#xff0c;以实现端到端的通信。 此模型包括四个抽象层&#xff0c;用于根据涉及的网络范围&#xff0c;对所有相关协议排序&#xff08;参见图 2&#xff09;。这几层从低到高依次为&am…

linux内核网络--skb_shared_info结构和skb_shinfo函数“每日读书”

如图2-5所示&#xff0c;数据缓冲区尾端有个名为skb_shared_info的数据结构&#xff0c;用以保持此数据区块的附加信息&#xff0c;此数据结构紧接在标记数据尾端的end指针之后&#xff0c;此数据结构的定义如下&#xff0c; struct skb_shared_info { atomic_t dataref; unsig…

ctfshow web入门 php特性 web123--web139

web123 必须传CTF_SHOW&#xff0c;CTF_SHOW.COM 不能有fl0g 在php中变量名字是由数字字母和下划线组成的&#xff0c;所以不论用post还是get传入变量名的时候都将空格、、点、[转换为下划线&#xff0c;但是用一个特性是可以绕过的&#xff0c;就是当[提前出现后&#xff0c;…

机器学习模型——GBDT和Xgboost

GBDT基本概念&#xff1a; GBDT&#xff08;Gradient Boosting Decision Tree&#xff0c;简称GBDT&#xff09;梯度提升决策树&#xff0c;是Gradient Boost 框架下使用较多的一种模型&#xff0c;且在GBDT中&#xff0c;其基学习器是分类回归树也就是CART&#xff0c;且使用…

【第二十六篇】Burpsuite实现请求方式修改+请求体文件选取

有时我们想将请求包的请求方法或请求体进行修改,这些操作可以由burpsuite完成,以节省时间。 文章目录 修改请求方法请求体文件选取修改请求方法 例如,某请求包的请求方法为GET: 如果我们想将其修改为POST且传递POST参数、上传文件,可以按以下步骤: 1、修改请求方法 2…

vue2中的局部组件和全局组件

注&#xff1a;vue2中使用组件远没有vue3中简单&#xff0c;具体可以看阿耿老师的lingshi小程序 如图所示&#xff1a;

二分练习题——奶牛晒衣服

奶牛晒衣服 题目分析 这里出现了“弄干所有衣服的最小时间”&#xff0c;那么可以考虑用二分去做。 第一阶段二段性分析 假设当前需要耗费的时间为mid分钟&#xff0c;如果mid分钟内可以烘干这些衣服&#xff0c;那么我们可以确定右边界大于mid的区间一定也可以。但是此时我…

2024.3.23力扣每日一题——统计桌面上的不同数字

2024.3.23 题目来源我的题解方法一 数学 题目来源 力扣每日一题&#xff1b;题序&#xff1a;2549 我的题解 方法一 数学 根据数学规律可知&#xff0c;当n1或n2时&#xff0c;桌上满足条件的永远只有一个数字&#xff08;1或2&#xff09;&#xff1b;当n>2时&#xff0…