Axios使用方法详解，从入门到进阶
目录
◼️ Axios的基础用法（get、post、put 等请求方法）
🌳 Axios的诞生
为什么会诞生Axios？说到Axios我们就不得不说下Ajax。最初的旧浏览器页面在向服务器请求数据时，由于返回的是整个页面的数据，所以整个页面都会强制刷新一下，这对于用户来讲并不是很友好。因为当我们只需要请求部分数据时，服务器返回给我们的确是整个页面的数据，这样会造成网络资源的占用，即十分消耗网络资源。为了提高数据请求效率，异步网络请求Ajax就应运而生了，它可以在页面无刷新的情况下请求数据。因此，这样一来，当我们只是需要修改页面的部分数据时，可以实现不刷新页面的功能。
🌳 Axios的介绍
定义
- Axios是一个基于promise 的 HTTP 库（类似于jQuery的Ajax，用于HTTP请求），可以用在浏览器和 node.js中（既可以用于客户端也可以用于node.js编写的服务端）。
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js中。Axios（相比于原生的XMLHttpRequest对象来说） 简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。
原理
- axios（ajax i/o system）不是一种新技术，本质上也是对原生XHR（XMLHttpReques）的封装，只不过它是基于Promise的，是Promise的实现版本，符合最新的ES规范。
👉 番外：AJAX
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
—— 异步网络请求 —— Ajax能够让页面无刷新的请求数据 ——
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下 ;通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios都可以实现异步网络请求。
Ajax是一种技术方案，但并不是一种新技术。它依赖现有的CSS/HTML/JavaScript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。实现了在页面不刷新个情况下和服务器进行数据交互。 异步的javascript和xml AJAX 是一种用于创建快速动态网页的技术。 ajax用来与后台交互
所以，我们现在梳理一下三者之间的关系：
参考资料：ajax与XHR的理解和使用
参考资料：原生ajax和jquery的ajax有何区别
① Ajax的实现依赖于XMLHttpRequest对象，即XMLHttpRequest可以实现Ajax。
Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合‘新’方法，包括: HTML 或 XHTML， CSS，JavaScript， DOM, XML， XSLT， 以及最重要的 XMLHttpRequest。当使用结合了这些技术的AJAX模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。
XMLHttpRequest是AJAX的基础，XMLHttpRequest API是Ajax的核心。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
② Axios在此基础上封装了XMLHttpRequest，即Axios可以实现Ajax
③ Jquery是对Javascript的一种轻量级封装的框架，而Ajax是JavaScript的一种应用，是异步JavaScript和XML——由XML+Javascript组合起来的一种异步请求技术，可实现动态局部刷新。也就是说Jquey是JavaScript的一个函数库，而JavaScript包含Ajax。 Jquery在原生Ajax的基础上进行了封装(说白了Jquey封装了Ajax，其实就是对原生XHR的封装——做了兼容处理，简化了使用)，也就是说在Jquery中可以用Ajax。
JQuery 提供了用于 AJAX 开发的丰富函数(方法)库。 通过 jQuery Ajax，使用 HTTP Get 和 HTTP Post，你都可以从远程服务器请求 TXT、HTML、XML 或 JSON。
但各种方式都有利弊：
- 原生的XMLHttpRequest的配置和调用方式都很繁琐，实现异步请求十分麻烦。
- jQuery的ajax相对于原生的ajax是非常好用的，但是没有必要因为要用ajax异步网络请求而引用整个jQuery框架。
特性
-
从浏览器创建 XMLHttpRequests请求
-
从node.js创建http请求
-
支持 Promise API
-
拦截请求和响应，比如：在请求前添加授权和响应前做一些事情。
-
转换请求数据和响应数据，比如：进行请求加密或者响应数据加密。
-
取消请求
-
自动转换JSON数据
-
客户端支持防御XSRF
浏览器支持情况
- Firefox、Chrome、Safari、Opera、Edge、IE8+
如何安装
5种安装方式
- 使用npm安装
$ npm install axios- 使用bower安装
$ bower install axios - 使用 yarn安装
$ yarn add axios- 使用 jsDelivr CDN
- 使用 unpkg CDN
🌳 Axios的使用
◼️ 创建vue项目
我们以在vue中使用axios为例
在电脑硬盘里，新建项目文件夹，使用vscode打开项目文件夹，在项目文件夹下，右键选择“在集成终端中打开”，打开终端。（当然，你也可以通过在项目文件夹目录的路径地址栏中输入cmd，按回车，打开命令行窗口进行创建vue项目）
现在，我们开始创建一个vue项目：vue create axios-vue，选择自定义配置manually select features，终端显示如下：上下键切换，空格键选择对应配置。
然后，依次选择完成余下的配置
运行终端指令 cd axios-vue 、npm run serve启动项目后，运行终端指令npm install axios安装axios，至此，项目创建完成，axios安装完成。
在项目的public文件夹下新建data.json文件，用于模拟数据。在组建中引入axios，并发起请求。
项目结构，如下：
* App.vue组件
![Vue logo]()
* index.html文件
来源地址：https://blog.csdn.net/sunyctf/article/details/129002056
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
