Axios、Axios实例、Axios配置、Axios拦截器

• 学习axios需要掌握AJAX（传输数据）和Promise（异步）
• 使用axios需要创建一个本地服务器，一般项目的脚手架都会自行创建（Vue8080、react3000）
• axios实例中的params配置项（对象）和 Vue路由传参中的params参数（对象）是相通的
• axios会自动将服务器返回的结果进行JSON解析

axios简介：

axios是一个基于Promise的网络请求库，作用于浏览器和node.js中 ，经常用在Vue和React框架中发送AJAX请求。

• 支持 Promise，使用Promise管理异步，告别传统callback方式
• 拦截请求与响应，比如：在请求前添加授权和响应前做一些事情。
• 转换请求数据和响应数据，比如：进行请求加密或者响应数据加密。
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

可以使用 npm i axios -D 安装开发依赖，也可以使用CDN

axios实例

创建

使用 axios.create() 来创建axios实例，配置相关信息，进行网络请求。当后端接口地址有多个，并且超时时长不同时，我们可以创建多个实例，配置不同的超时时长，用不同的实例对象去请求不同的接口。

此时我们可以访问http://loacalhost:8080与http://loacalhost:8081两个不同域名的接口，并且使用不同的配置。

请求配置

我们有三种配置方式，优先级：全局配置 < 实例配置 < 请求配置

• axios全局配置

• axios实例配置

• axios请求配置

拦截器

拦截器（interceptors）：在 请求前 或 响应被处理前 进行拦截

• 请求拦截器，使用 xxx.interceptors.request.use()

• 响应拦截器，使用 xxx.interceptors.response.use()

取消拦截器使用 xxx.interceptors.response.eject() 方法

举例一：登录权限

举例二：移动端开发数据加载loading动画

实现的效果是请求数据的时候显示loading动画，数据响应后隐藏loading动画。