Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。
Axios特性
（1）支持Promise API
（2）拦截请求与响应，比如：在请求前添加授权和响应前做一些事情。
（3）转换请求数据和响应数据，比如：进行请求加密或者响应数据加密。
（4）取消请求
（5）自动转换JSON数据
（6）客户端支持防御XSRF
浏览器支持情况
Firefox、Chrome、Safari、Opera、Edge、IE8+。
Axios基本使用
打开控制台瞅两眼，已经有数据了
Axios常用请求方法
方法列举：get, post, put, patch, delete等。
备注：post一般用于新建数据，put一般用于更新数据，patch一般用于数据量较大的时候的数据更新。
1、get方法
方式一
方式二
带有参数后get请求实际是 xxxxx/data.json?...，写了这么多结果就是url加了参数。
浏览器控制台相关信息介绍：
2、post方法
post请求常用的数据请求格式有两种：
1.form-data（常用于表单提交（图片上传、文件上传））
注意：请求地址Request URL: xxxxxxx/data.json，
请求头中Content-Type: multipart/form-data; boundary=——WebKitFormBoundarydgohzXGsZdFwS16Y
参数形式：id:12
2.application/json（常用）
方式一
方式二
注意：请求地址Request URL: xxxxxxxx/data.json，
请求头中Content-Type: application/json;charset=UTF-8
参数形式：{ id:12 }
3、put方法
4、patch方法
5、delete方法
方式一：params
方式二：data
注意：params方式会将请求参数拼接在URL上面，Request URL: xxxxxxxx/data.json?...
参数形式：id:12
Content-Type: text/html; charset=utf-8
data方式不会讲参数拼接，是直接放置在请求体中的，Request URL: xxxxxxxx/data.json
参数形式：{id:12}
Content-Type: application/json;charset=UTF-8
总结：上述方法中均对应两种写法：（1）使用别名：形如axios.get()；（2）不使用别名形如axios()；
6、并发请求
并发请求，就是同时进行多个请求，并统一处理返回值。类似promise.all。
在下面例子中，我们使用axios.all，对data.json/city.json同时进行请求，使用axios.spread，对返回的结果分别进行处理。代码如下：
注意：axios.all的参数是请求函数的数组，在对应的回调then中，调用axios.spead对返回值进行处理，即可。
并发请求的应用场景：需要同时进行多个请求，并且需要同时处理接口调用的返回值的时候，我们可以使用并发请求。
Axio实例
1、axios实例的创建
比如：后端接口地址有多个（ test.com、http://www.example.com），并且超时时长不同（1000ms、2000ms），这个时候，我们可以创建实例。
思路如下：创建多个实例，配置不同的超时时长，用不同的实例去请求不同的接口。使用axios.acreate来创建实例，配置相关信息，进行网络请求。代码如下：
备注：此时我们就可以访问 loacalhost:8080与 loacalhost:8081两个不同域名的接口，并且使用不同的配置。
2、axios实例的相关配置
（1）配置列表
（2）三种配置方式
优先级：axios全局配置 < axios实例配置 < axios请求配置
3、常用参数配置的使用方法
举例1：
分析：配置的参数为baseURL：‘http://localhost:9090’，timeout:1000，method:‘get’，params:{ id:10}，url:’/contactList’
举例2：
分析：配置的参数为baseURL：‘http://localhost:9091’，timeout:5000，method:‘get’，url:’/contactList’
注意：最终的有效配置是由优先级高的覆盖优先级低的。
Axios拦截器、错误处理与取消请求
1、拦截器
什么是拦截器？
在请求前或响应被处理前拦截他们，分为两种：请求拦截器与响应拦截器。
拦截器的使用方法
请求拦截器
响应拦截器
取消拦截器
实用举例A：登录权限
需要token的接口实例
不需要token的接口实例
实用举例B：移动端开发数据加载loading动画
备注：实现的效果是请求数据的时候显示loading动画，数据响应后隐藏loading动画。
2、错误处理，拦截
结合请求拦截器与响应拦截器来说，不管是请求错误还是响应错误，都会执行catch方法。
错误处理举例
在实际开发中，不会再每次网络请求的时候，使用catch方法，可以添加统一的错误处理方法。代码如下：
思路分析：首先创建实例，给实例设置请求拦截器与响应拦截器。
3、取消请求（不常用）
应用场景
在查询数据的时候，很长时间（3-5s）仍未获取数据，这个时候需要取消请求。
Axios请求的封装与使用思路分析
axios 请求的封装，无非是为了方便代码管理，我们可以使用抽离拆分的思想，将不同功能模块的接口处理成不同的模块，然后封装一个方法，专门用于数据交互。
第一步：新建 src/service/contactApi.js 文件
备注：该文件的用途只有一个，定义不同的接口请求信息（包含method、url等）并导出使用。当接口增加或者删除的时候，只需要定义在该文件中即可。
第二步：新建 src/service/http.js 文件
具体的思路步骤如下：
首先，我们引入contactApi.js文件，别名定义为 service。
定义新的axios 实例，针对当前功能模块联系人列表管理 contactList ，配置baseURL基础域名、timeout请求超时时间等等，区别于其他功能模块。
定义http 作为请求方法的容器，配置对应的参数(即请求方法中的其他信息，比如 headers，content-type，token等等)。需要注意的是，在其中我们要区分 content-type的形式有两种：form-data 与 application/json，它们的参数配置不同，form-data 形式的参数，我们需要定义 Formdata 对象。具体如下：
温馨提示：其中isFormData 定义为 Boolean 变量，用于标识是否为 FormData 形式。
根据不同的请求方式，发起网络请求，并导出返回值。
注意：对于不同方法的区别在于：get 与 delete 的参数在 config 中配置，而不是使用 params 。
设置请求拦截器与响应拦截器
导出src/service/http.js文件，用于其他地方的引入。
第三步：在入口文件中导入http.js ，并挂载到 vue 原型上。
第四步：在组件中使用封装的请求
注意：在使用的时候，我们需要结合async 与 await 才能正确使用。具体的使用方法是：
总结
在进行项目开发的时候，我们需要对网络请求的方法进行封装，可以有效地减少后期代码维护的难度，建议开发者根据不同的功能模块进行拆分，方便后期代码问题的定位。另外，也能实现代码的低耦合，避免出现更多的重复代码。
细谈Axios中那些不为人知的秘密!一文读懂Axios
1、axios实例的创建 比如：后端接口地址有多个（ test.com、http:\/\/www.example.com），并且超时时长不同（1000ms、2000ms），这个时候，我们可以创建实例。思路如下：创建多个实例，配置不同的超时时长，用不同的实例去请求不同的接口。使用axios.acreate来创建实例，配置相关信息，进行网络请求。代码...
Axios源码深度剖析 - AJAX新王者
深入源码分析，你将发现 Axios 的强大之处。通过 `axios.js` 文件的入口，核心在于 `createInstance` 方法，该方法能生成一个指向 `Axios.prototype.request` 的 Function，从而实现多种调用方式。在 Axios 的核心 `Axios` 类中，`request` 方法是所有功能的中枢，无论是 GET、POST 还是其他方法，最终...
一文秒懂 ajax, fetch, axios
Axios 是一个用于浏览器和 Node.js 的 HTTP 客户端，支持最新的 ES 规范。它对原生 XMLHttpRequest 的封装，采用 Promise 实现。Axios 的优势包括对 CSRF 的防护、全局默认值的设置、请求和响应的拦截器等。在使用 Axios 时，可以设置全局默认值，创建实例并添加拦截器，以处理请求前后的预处理逻辑。Fe...
HTTP 请求头部控制:Axios Headers 详细解读与应用
error));```对比分析：Axios与Fetch API的差异 尽管Fetch API同样强大，但在处理复杂请求头时，Axios的API设计显得更为直观。例如，在上传文件时，Axios的代码行数更少，更易于理解和维护。以下是使用Fetch API的示例：```htmlFetch API的上传请求:fetch('https:\/\/example.com\/api\/upload-avatar', {...
VUE中获取数据方式(axios)详细介绍
一、HTTP请求类型在axios中，主要的HTTP请求类型有GET、POST、PUT、DELETE和PATCH。这些方法分别对应不同的数据操作需求：GET 用于获取数据。POST 用于新增数据或提交表单。DELETE 用于删除数据。PUT 用于更新所有数据。PATCH 用于更新部分数据。二、GET请求使用axios进行GET请求的代码如下：axios.get(url, ...
axios中文文档
Axios中文文档概览Axios是一个用于浏览器和Node.js环境的HTTP客户端库，以Promise为核心，简化了HTTP请求的管理。它提供了丰富的API和配置选项，适合处理各种HTTP请求。安装与导入可以通过npm或Bower进行安装，也可以直接通过CDN引入到项目中。示例基础用法包括发起GET和POST请求，以及同时处理多个请求。例如：GE...
基于JavaScript 的网络请求工具库 axios 的使用介绍
灵活性极高。例如，在服务器端，axios可以用于与第三方API交互，如从GitHub API获取用户信息，或者实现定时同步数据到本地数据库，以及文件上传功能。综上所述，axios凭借其简洁的API和丰富的功能，无论是浏览器还是Node.js环境，都能高效地处理各种HTTP请求，是开发中不可或缺的工具。
聊一聊Axios与登录机制
HTTP为无状态协议，服务器不保存用户状态，因此登录功能至关重要，以识别用户身份，避免每次请求都需输入用户名与密码。常用登录方案之一是通过请求头携带Token。实现方法如下：封装LocalStorage，创建公共方法，统一赋值到Vue.prototype.$util中。封装三个方法：getToken、setToken、removeToken。创建axios实例，...
真没必要再对axios进行过度的封装
那些上来就说用typescript封装axios的，你确定不是在搞笑吗？而且，做为个人开发者，在开发和使用过程中，肯定会产生纰漏和bug，比不过经过多人验证过的仓库。2.不是不能封装其实也不是不能封装，毕竟axios做为一个通用的框架，它不可能适应所有的项目和架构。我不希望的是过度的封装，既没必要，又...
axios是什么
Axios是一个轻量级的HTTP客户端库，适用于前端和后端开发。它允许开发者以简单的方式发送HTTP请求并处理响应。基于Promise的设计使得异步操作更加直观和易于管理。Axios支持在浏览器端使用XMLHttpRequests或JSONP进行请求，以及在Node.js中使用HTTP模块进行请求。它的功能丰富，包括拦截请求和响应、转换请求和...
