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

embedded/2024/11/27 15:32:46/

目录

前言

开篇语

准备工作

获取

介绍

使用

结束语


前言

开篇语

本系列博客主要分享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中: 

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

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

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

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

javascript">headers: {'Content-Type': 'application/json'}

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

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

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

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

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

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

结束语

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

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

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

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

——临期的【H2O2】


http://www.ppmy.cn/embedded/140934.html

相关文章

leetcode hot100【LeetCode 215.数组中的第K个最大元素】java实现

LeetCode 215.数组中的第K个最大元素 题目描述 给定一个整数数组 nums 和一个整数 k,请返回数组中第 k 个最大的元素。 请注意,要求排名是从大到小的,因此第 k 个最大元素是排序后的第 k 个元素。你需要设计一个高效的算法来解决这个问题。…

基础入门-Web应用架构搭建域名源码站库分离MVC模型解析受限对应路径

知识点: 1、基础入门-Web应用-域名上的技术要点 2、基础入门-Web应用-源码上的技术要点 3、基础入门-Web应用-数据上的技术要点 4、基础入门-Web应用-解析上的技术要点 5、基础入门-Web应用-平台上的技术要点 一、演示案例-域名差异-主站&分站&端口站&…

SpringBoot - 优雅的实现【账号登录错误次数的限制和锁定】

文章目录 Pre需求实现步骤简易实现1. 添加依赖2. 配置文件3. 自定义注解4. AOP切面5. 使用自定义注解:6. 测试 附总结 Pre SpringBoot - 优雅的实现【流控】 需求 需求描述: 登录错误次数限制:在用户登录时,记录每个账号的登录错…

Conda命令速查

命令速查 命令Command新建Python环境conda create --name hello python3.10.14激活环境conda activate hello退出当前环境conda deactivate安装python包conda install < package name>安装python包pip install < package name>查看所有python环境conda env list

嵌入式系统与OpenCV

目录 一、OpenCV 简介 二、嵌入式 OpenCV 的安装方法 1. Ubuntu 系统下的安装 2. 嵌入式 ARM 系统中的安装 3. Windows10 和树莓派系统下的安装 三、嵌入式 OpenCV 的性能优化 1. 介绍嵌入式平台上对 OpenCV 进行优化的必要性。 2. 利用嵌入式开发工具&#xff0c;如优…

分布式查询处理优化之数据分片

基本的数据分布策略 数据分片 分片是将分布式数据库的全局数据逻辑划分为关系片段并且进行实际的物理分配的过程。不同的分布式系统有着不同的分片策略。 关系数据库主要通过数据分片技术对全局数据进行逻辑划分和实际的物理分配。考虑的主要因素&#xff1a;数据的模式特征…

Rust赋能前端: 纯血前端将 Table 导出 Excel

❝ 人的本事靠自己&#xff0c;人的成长靠网络 大家好&#xff0c;我是柒八九。一个专注于前端开发技术/Rust及AI应用知识分享的Coder ❝ 此篇文章所涉及到的技术有 Rust( Rust接收json对象并解析/Rust生成xml) WebAssembly 表格合并(静态/动态) React/Vue表格导出 excel Rspac…

一篇文章读懂 Prettier CLI 命令:从基础到进阶 (3)

Prettier 命令行工具 Prettier 提供了一个强大的命令行界面 (CLI)&#xff0c;允许用户通过命令行来格式化代码。在 package.json 中&#xff0c;你可以配置一个脚本来运行 Prettier&#xff0c;例如&#xff1a; "scripts": {"format": "prettier …