Axios（Vue-Resource的取代者、拦截器）

axios简述

老样子，先了解背景，再学习使用
虽然看不懂，但还是了解一下的Axios git仓库

Axios是干啥使的

• Axios是一个基于Promise的Http库，可以用在浏览器和node.js中
• Axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架，它的主要作用就是实现AJAX异步通信
• 为啥要用它，因为Vue的边界很明确，就是为了处理DOM，所以并不具备通信功能，此时就需要使用一个额外的通信框架与服务器交互，当然也可以使用jQuery提供的AJAX通信功能
• 简单来说，Axios就是可以发送get、post请求

Axios功能特点

• 从浏览器中创建XMLHttpRequests
• 从node.js创建http请求
• 支持Promise API【JS中链式编程】
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF（跨站请求伪造）

传统AJAX & jQuery & Vue-Resource

其实在Vue开发过程中能实现发送网络请求的方式有很多种，为什么最终选择了Axios呢，当然是由于它过于优秀，同时也因为队友并不怎么给力啊

• 传统Ajax请求是基于XMLHttpRequest
  而在项目开发中，封装它的过程是比较麻烦的，并且配置和调用的方式也比较混乱，一般开发者都不会用这种方式，而是使用jQuery-Ajax
• jQuery-Ajax相对于传统的Ajax是好用的
  但是存在的问题是，Vue的开发过程中不需要使用jQuery，而且jQuery是一个不那么小的，比较重量级的框架，而为了方便进行一个网络请求，特意引入一个jQuery是非常没有必要的，也是不划算的
• Vue-Resource
  尤同学曾经推出了Vue-resource插件，Vue-Resource的体积相对于jQuery小了很多，但当Vue2.0版本推出后，尤同学说以后将不会再对Vue-Resource进行维护和更新了，所以说继续使用这种方式进行开发项目是存在很大隐患的。
• Axios
  Axios也是尤同学说不再维护Vue-Resource后推荐使用的框架，它支持再浏览器中发送XMLHttpRequests请求，支持在Node.js中发送http请求，支持Promise API，可以拦截请求和响应，反正呢，就是目前最厉害的了。

Axios基础使用（基于json-server）

准备工作

• 一如既往，使用命令行创建项目工程
  
• 开发工具WebStrom打开，修改项目目录结构
  

安装

• 本地安装axios
  
• 安装vue-axios
  因为在Vue中使用，所以光安装axios是不够用的，还需要再额外安装一个vue-axios
  

开始使用

本次使用也是使用json-server来模拟数据的，所以使用json-server部分与vue-resource中的一致

怕你懒得翻，所以还是再说一遍
上次在Vue-Resource中使用的是全局安装，所以本次就不需要再安装一次了


好了，启动完json-server我们就开始用了。

直接使用（局部使用）

App.vue中的script部分直接使用

与Vue-Resource的使用方式类似，但是我们可以看到的是数据存储在data里，而Vue-Resource数据存储在body里
App.vue的template部分

全局引用

• main.js中引入Axios和vue-axios
  
• main.js中创建Axios实例并安装使用
  
  ！！！注意Vue.use安装的是VueAxios而不是Axios，因为写错这个问题坑了我好久
• App.vue里script使用有两种方式，推荐第二种
  方式1：
  
  方式2：
  

实践

做个弹窗，完成新增用户功能

• App.vue的template在上述的基础上新增
  
• App.vue上script部分对按钮点击后的操作
  

Axios的拦截器使用

Axios比较显著的优点就是它的拦截器很好用，可以在方法之前和方法之后进行拦截

• main.js中添加代码进行使用
  前置拦截
  
  后置拦截
  

运行后结果如下：

项目结构改进

当前我们可以看到给main.js里添加了不少代码，因为拦截器的缘故
所以可以效防在vue路由里对项目结构的改进，将关于拦截器的部分，单独写入一个文件，然后在main.js里引入

• axios/index.js的内容
  
• main.js里引入
  
  可以看到main.js里的代码简洁了不少