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

news/2024/11/28 13:49:24/

目录

前言

开篇语

准备工作

获取

介绍

使用

结束语


前言

开篇语

本系列博客主要分享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/news/1550631.html

相关文章

网络基础 - 地址篇

一、IP 地址 IP 协议有两个版本,IPv4 和 IPv6IP 地址(IPv4 地址)是一个 4 字节,32 位的正整数,通常使用 “点分十进制” 的字符串进行表示,例如 192.168.0.1,用点分割的每一个数字表示一个字节,范围是 0 ~…

逻辑处理器核心指纹修改

navigator.hardwareConcurrency的属性,可以用来获取CPU的逻辑处理器核心数。 1、navigator.hardwareConcurrency接口定义: third_party\blink\renderer\core\frame\navigator_concurrent_hardware.idl // https://html.spec.whatwg.org/C/#navigator.hardwarecon…

w059基于springboot的课程答疑系统

🙊作者简介:拥有多年开发工作经验,分享技术代码帮助学生学习,独立完成自己的项目或者毕业设计。 代码可以查看文章末尾⬇️联系方式获取,记得注明来意哦~🌹赠送计算机毕业设计600个选题excel文件&#xff0…

理解B+树

深入理解B树:数据库索引的核心技术 在数据库的世界里,数据检索的速度至关重要。为了提高数据检索的效率,数据库系统采用了多种数据结构,其中B树(B-plus Tree)因其独特的特性而成为索引实现的首选。今天&am…

Centos 安装 Node.js 和 npm

方法2:使用 NVM(Node Version Manager)安装 安装 NVM curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash 重新加载配置 source ~/.bashrc 安装最新的 LTS 版本的 Node.js nvm install --lts 验证安装…

PostgreSQL的内存结构

PostgreSQL的内存结构对于数据库的性能和稳定性至关重要。它主要分为两大类:本地内存区域(Local memory area)和共享内存区域(Shared memory area) 。 共享内存(Shared Memory) 共享内存是Pos…

【微服务】RabbitMQ与SpringAMQP消息队列

一、初识MQ 1. 同步通讯 同步通讯就好比双方打电话,可以实时响应,但只能一对一,只能同时和一个人聊天。 异步通讯就好比两个人发信息,你发信息给对方,对方不一定给你回复,但是可以一对多,可…

Java线程的使用

Java中的线程是用来实现多任务并发执行的机制。在Java中,主要有两种方式来创建和使用线程:实现Runnable接口和继承Thread类。 实现Runnable接口: 创建一个类,实现Runnable接口,并重写run()方法。在run()方法中定义线程…