关于VueJs搭建Axios接口请求工具分析

axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

1. 从浏览器中创建 XMLHttpRequest
   

2. 从 node.js 发出 http 请求
   

3. 支持 Promise API
   

4. 拦截请求和响应
   

5. 转换请求和响应数据
   

6. 取消请求
   

7. 自动转换JSON数据
   

8. 客户端支持防止 CSRF/XSRF

上一章，我们认识了项目的目录结构，以及对项目的目录结构做了一些调整，已经能把项目重新跑起来了。今天我们来搭建api接口调用工具Axios。Vue本身是不支持ajax调用的，如果你需要这些功能就需要安装对应的工具。

支持ajax请求的工具很多，像superagent和axios。今天我们用的就是axios，因为听说最近网上大部分的教程书籍都使用的是axios，本身axios这个工具就已经做了很好的优化和封装，但是在使用时，还是比较繁琐，所以我们来重新封装一下。

安装Axios工具

cnpm install axios -D

在安装的时候，一定要切换进入咱们的项目根目录，再运行安装命令，然后如提示以上信息，则表示安装完成。

封装Axios工具

编辑src/api/index.js文件（我们在上一章整理目录结构时，在src/api/目录新建了一个空的index.js文件），现在我们为该文件填写内容。

配置Axios工具

我们在使用之前，需要在src/main.js中进行简单的配置，先来看一下原始的main.js文件

修改为：

通过以上的配置，我们就可以在项目中使用axios工具了，接下来我们来测试一下这个工具。

使用Axios工具

我们来修改一下 src/page/Index.vue 文件，将代码调整为以下代码：

我们在Index.vue中向浏览器的控制台输入一些接口请求到的数据，如果你和我也一样，那说明我们的接口配置完成正确。如下图：

如果你是按我的操作一步一步来，那最终结果应该和我一样。如果出错请仔细检查代码。