axios安装_Vue的axios的简单封装

MVC对于网站开发的程序员来说应该是无人不知了吧，一直以来，一直都在延用这一种设计理念。MVC是Model、View、Controller，即数据模型层、视图层、控制层。这种设计理念是在后台代码中对各个代码的工作内容进行分工，从而实现在编码过程中，能达到专人负责专项的工作理念和开发员工的分工使用。随着时代的进步，随着移动端的进步和推广，MVC这种设计理念已经开始渐渐的不适合了，由此为了适应变化和发展，也为了能更明确的把前后端分离开来，从而产生了一种叫 MVVM的设计理念。什么叫MVVM呢？MVVM是前端工程化的体现，MVVM是Model-View-ViewModel的缩写，是MVC模式的改进版，即数据模型层、视图层、视图模型层。

而这个所谓的视图模型层可以说就是一个工具，一个桥梁，一个反数据模型和视图连接在一起的工具。常用的这个工具就有Vue。Vue是一套构建用户界面的渐进式框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用，并且不用操作DOM，只关注视图层。它不仅轻易上手，还便于与第三方库等 进行整合。

现在我们来简单的说说Vue这个工具使用。

利用Vue的工具，Vue-cli轻松搭建一个项目。这个在Vue的手册上可以轻易的查找到，这里就不再赘述了。

搭建好项目框架后，我们就可以开始写项目了，这里我只简单的介绍一下，Vue里面的一个简单的封装。因为在Vue项目的过程中，一些使用的比较频繁的代码，我们都会把它封装起来，这样可以重复使用，不会产生冗余的代码，也减轻了程序员的工作。

在Vue项目中，与后台交互获取数据这一块，我们通常使用的是第三方模块Axios。在项目的进行过程中，我们会多次的与后台交互获取数据，所以会非常频繁的使用到axios模块。这样我们就可以对axios进行封装，以方便我们后面的使用。在Vue中这种添加全局的方法或属性的功能叫做插件。那么我们就来开发一个自定义的插件用来封装axios。

第一步，先在项目中安装axios这个第三方模块。

第二步，我们可以在项目目录中的src文件夹中的assets这个文件夹里面新建一个js文件夹用来存放封装axios的文件。然后新建一个js文件，名字随意。

第三步，在这个js文件中先行引入axios模块。

第四步，根据ES6模块化的语法，在创建的过程中，我们需要使用export default{}来导出这个模块。

第五步，根据Vue手册，自定义插件需要暴露一个Install方法，这个方法的第一个参数是Vue构造器，第二个参数是一个可选的选项对象。

第六步，自定义配置一个新建的axios 实例，由于向后台请求数据路径的前面接口基准地址都是相同的，为了避免后面每次请求都需要重复填写，可以使用axios的配置选项的其中一项进行统一配置，baseURL选项。设置这个选项是为了便于axios实例的方法传递相对的URL，它会自动加在‘url’选项的前面。

第七步，在项目中，由于每次向axios发送请求之前都需要对请求头进行设置，必须在请求头中使Authorization字段提供 token 令牌，为了避免每次请求时都需要设置请求头，所以我们可以利用axios对象的请求拦截器进行拦截设置。即在每次发送请求前拦截下来先添加一个请求头，然后再发送请求。如果有其它的东西需要在请求发送之前设置好，也可以在这个拦截器里面设置好。

第八步，添加 Vue 实例方法，通过把它们添加到Vue.prototype 上实现。

第九步，最后在根目录下的main.js里面引入封装好的插件。

到这里，封装就全部完成了，就可以在组件里面使用了。其他需要封装的插件也是一样的。最后贴一张完整的封装，仅供参考。