Axios使用方法详解，从入门到进阶

目录

🌳 Axios的诞生

🌳 Axios的介绍

定义

原理

特性

浏览器支持情况

如何安装 

🌳 Axios的使用

◼️ 创建vue项目

◼️ Axios的基础用法（get、post、put 等请求方法）

get方法

post方法

put和patch方法 

delete方法

并发请求

◼️ Axios进阶用法（实例、配置、拦截器、取消请求等）

1、axios实例的创建与配置

2、拦截器

3、取消请求（不常用，了解）

◼️ Axios进一步封装，在项目中的实际应用

代理

封装 

调用

🌳 参考资料

🌳 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组件

* index.html文件

                  
来源地址：https://blog.csdn.net/sunyctf/article/details/129002056