【H2O2|全栈】JS进阶知识(十一)axios入门

目录

前言

开篇语

准备工作

获取

介绍

使用

结束语


前言

开篇语

本系列博客主要分享JavaScript的进阶语法知识,本期主要对axios进行基本的了解。

与基础部分的语法相比,ES6的语法进行了一些更加严谨的约束和优化,因此,在之后使用原生JS时,我们应该尽量使用ES6的语法进行代码编写。

准备工作

软件:【参考版本】Visual Studio Code

插件(扩展包):Open in browser, Live Preview, Live Server, Tencent Cloud AI Code Assistant, htmltagwrap

提示:在不熟练的阶段建议关闭AI助手

系统版本: Win10/11/其他非Windows版本

提示:node.js在当前文件夹下使用cmd运行,不在浏览器解析运行

获取

点击下面的地址,进入axios的中文文档网页——

axios中文文档icon-default.png?t=O83Ahttps://www.axios-http.cn/在进入的页面中,在左上角点击“介绍”——

在进入的页面中,向下滑动,来到安装章节。

这里提供获取js文件的一种参考的方式,我们直接将jsDelivr CDN或unpkg CDN中的地址复制下来,放到浏览器的地址栏中,就可以直接在线打开axios.min.js的文件。

我们使用Ctrl + A直接全选内容,复制,自行添加一个axios.min.js文件即可。

介绍

Axios是一个基于Promise的网络请求库,常用于Node.js中,它是通过Promise对AJAX进行的一种封装。

axios和JQuery的ajax()方法几乎相同,只是在形式和参数上略有差别。

axios以及它相关的API会返回一个Promise对象,因此可以调用Promise的相关方法。

使用

我们之前的参考文档,可以帮助我们进行axios代码的编写。

我们知道,axios实际上进行的就是ajax操作,它有下面几个基本的参数——

参数作用
url请求地址
method请求的方式(get / post),不指定时,默认为get方式
parmasget请求时,使用该方式传递数据
datapost请求时,使用该方式传递数据
headers

设置请求头,指定传输数据的类型

对于method,axios还可以直接调用两个方法——get()和post(),使用这两个方法时,需要把url拿出来,然后继续将后面的内容放在对象中——

axios.get('你的地址', {......});

在parmas中,填写拼接在url?后的内容,按照对象的键值对的形式传入数据。

如果url的最后已经拼接了数据,则不需要用到这一步。

比如,url可以是这样——

http://xxxxxx/appapi.php?a=getPortalList&catid=20&page=1

或者,url中不需要?后的数据,就像下面这样——

http://xxxxxx/appapi.php

然后将数据放在params中: 

parmas: {a: "getPortalList",catid: 20,page: 1
}

而在data中,使用类似JSON对象字符串的形式传入数据。

data: {"username": "admin","password": "123456"
}

在请求头中,可以指定需要传输的数据类型,默认为Content-Type: application/json。

headers: {'Content-Type': 'application/json'}

根据实际情况设置,比如如果需要传form数据,则这里的Content-Type就需要设置为x-www-form-urlencoded。

在类型后面,使用分号分隔,还可以指定字符集类型utf-8。

headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}

最后,在then中接收成功的数据,在catch中捕获失败的数据。

.then((res) => {console.log(res);
})
.catch((err) => {console.error(err);
});

之后,在学习vue时,我们会进一步学习axios的相关知识。

结束语

本期内容到此结束。关于本系列的其他博客,可以查看我的JS进阶专栏。

在全栈领域,博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历,然后把自己领悟到的一些东西总结一下,分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的,一些定义性的文字加入了笔者自己的很多理解在里面,所以仅供参考。如果有说的不对的地方,还请谅解。

==期待与你在下一期博客中再次相遇==

——临期的【H2O2】

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

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

相关文章

git使用文档手册

创建一个本地代码工作空间,比如这里使用test目录作为工作目录 针对仓库地址 http://192.168.31.125:9557/poxiaoai-crm/project-crm.git。 1. 安装 Git 确保您的系统已经安装了 Git。如果未安装,请根据操作系统访问 Git 官网 下载并安装。 验证安装 …

数据结构——排序算法第二幕(交换排序:冒泡排序、快速排序(三种版本) 归并排序:归并排序(分治))超详细!!!!

文章目录 前言一、交换排序1.1 冒泡排序1.2 快速排序1.2.1 hoare版本 快排1.2.2 挖坑法 快排1.2.3 lomuto前后指针 快排 二、归并排序总结 前言 继上篇学习了排序的前面两个部分:直接插入排序和选择排序 今天我们来学习排序中常用的交换排序以及非常稳定的归并排序 快排可是有多…

11.26深度学习_神经网络-数据处理

一、深度学习概述 1. 什么是深度学习 ​ 人工智能、机器学习和深度学习之间的关系: ​ 机器学习是实现人工智能的一种途径,深度学习是机器学习的子集,区别如下: ​ 传统机器学习算法依赖人工设计特征、提取特征,而深…

数据结构 (13)串的应用举例

前言 数据结构中的串(String),也称为字符串,是一种常见且重要的数据结构,在计算机科学中被广泛应用于各种场景。 一、文本处理 文本编辑器:在文本编辑器中,字符串被用来表示和存储用户输入的文本…

PointNet++论文复现

✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…

时间的礼物:如何珍视每一刻

《时间的礼物:如何珍视每一刻》 夫时间者,宇宙之精髓,生命之经纬,悄无声息而流转不息,如织锦之细线,串联古今,贯穿万物。 人生短暂,犹如白驹过隙,倏忽而逝,…

NVIDIA /CUDA 里面的clock rate详细介绍

本文主要介绍: cuda中的时钟频率具体有哪些?clock rate怎么调节? cuda中可以通过nvml 函数或者命令来调整时钟频率(clock rate) 介绍 命令行 nvdia-smi -q -i 0 可以查询device相关参数,可以用后面的命…

扫振牙刷设计思路以及技术解析

市面上目前常见的就两种:扫振牙刷和超声波牙刷 为了防水,表面还涂上了一层防水漆 一开始的电池管理芯片,可以让充电更加均衡。 如TP4056 第一阶段以恒流充电;当电压达到预定值时转入第二阶段进行恒压充电,此时电流逐…

电磁继电器

它的控制原理很简单,当我们给它的线圈接电,这个线圈就有了磁性,它上面的衔铁就会被吸引,这样小灯泡就会点亮 继电器于MOS管的差别在于,继电器可以很轻松的胜任高电压、大电流的场合 我们从外壳上可以看到 30VDC&#x…

【Jenkins】自动化部署 maven 项目笔记

文章目录 前言1. Jenkins 新增 Maven 项目2. Jenkins 配置 Github 信息3. Jenkins 清理 Workspace4. Jenkins 配置 后置Shell脚本后记 前言 目标:自动化部署自己的github项目 过程:jenkins 配置、 shell 脚本积累 相关连接 Jenkins 官方 docker 指导d…

LangGraph中的State管理

本教程将介绍如何使用LangGraph库构建和测试状态图。我们将通过一系列示例代码,逐步解释程序的运行逻辑。 1. 基本状态图构建 首先,我们定义一个状态图的基本结构和节点。 定义状态类 from langgraph.graph import StateGraph, START, END from typi…

Excel的图表使用和导出准备

目的 导出Excel图表是很多软件要求的功能之一,那如何导出Excel图表呢?或者说如何使用Excel图表。 一种方法是软件生成图片,然后把图片写到Excel上,这种方式,因为格式种种原因,导出的图片不漂亮&#xff0c…

vue实现滚动条滑动到底部分页调取后端接口加载数据

一、案例效果 二、前提条件 接口返回数据 三、案例代码 子组件 const $emit defineEmits([cloneItem, updateList]);const props defineProps({rightList: {type: Array,},chartTableData: {type: Array as () > ChartListType[],},deleteChartInfo: {type: Object,}…

Ubuntu中使用多版本的GCC

我的系统中已经安装了GCC11.4,在安装cuda时出现以下错误提示: 意思是当前的GCC版本过高,要在保留GCC11.4的同时安装GCC9并可以切换,可以通过以下步骤实现: 步骤 1: 安装 GCC 9 sudo apt-get update sudo apt-get ins…

【Android】RecyclerView回收复用机制

概述 RecyclerView 是 Android 中用于高效显示大量数据的视图组件&#xff0c;它是 ListView 的升级版本&#xff0c;支持更灵活的布局和功能。 我们创建一个RecyclerView的Adapter&#xff1a; public class MyRecyclerView extends RecyclerView.Adapter<MyRecyclerVie…

Kotlin DSL Gradle 指南

本文是关于 Kotlin DSL Gradle 的指南&#xff08;上篇&#xff09;&#xff0c;介绍了 Gradle 作为 Android 开发构建工具的作用及优势&#xff0c;包括初始配置、生命周期、依赖管理、Task 相关内容。如 Task 的创建、自定义、各种方法和属性&#xff0c;以及文件操作等&…

数据库导论

data 数据是数据库中存储的基本数据&#xff0c;描述事物的符号称为数据。 DB 数据库是长期存储在计算机内&#xff0c;有组织&#xff0c;可共享的大量数据的集合。数据库中的数据按照一定的数据模型组织&#xff0c;描述和存储&#xff0c;具有较小的冗余度&#xff0c;较…

HTML实现 扫雷游戏

前言&#xff1a; 游戏起源与发展 扫雷游戏的雏形可追溯到 1973 年的 “方块&#xff08;cube&#xff09;” 游戏&#xff0c;后经改编出现了 “rlogic” 游戏&#xff0c;玩家需为指挥中心探出安全路线避开地雷。在此基础上&#xff0c;开发者汤姆・安德森编写出了扫雷游戏的…

Spring Boot英语知识网站:开发策略

5系统详细实现 5.1 管理员模块的实现 5.1.1 用户信息管理 英语知识应用网站的系统管理员可以对用户信息添加修改删除以及查询操作。具体界面的展示如图5.1所示。 图5.1 用户信息管理界面 5.1.2 在线学习管理 系统管理员可以对在线学习信息进行添加&#xff0c;修改&#xff0…

HTML5和CSS3新增特性

HTML5的新特性 HTML5新增的语义化标签 HTML5 的新增特性主要是针对于以前的不足&#xff0c;增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题&#xff0c;基本是 IE9 以上版本的浏览器才支持&#xff0c;如果不考虑兼容性问题&#xff0c;可以大量…