【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中文文档
https://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方式 |
| parmas | get请求时，使用该方式传递数据 |
| data | post请求时，使用该方式传递数据 |
| 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】
原文地址：https://blog.csdn.net/ZC13786305863/article/details/144065330
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！