Vue简单实例——Axios

简单介绍：

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

这是官网的介绍，巴拉巴拉，可以理解就是一个用来请求服务端发来的数据，和接口数据，还能给服务端发送数据的一个方便好用的插件

安装方法：

建议使用npm安装，命令如下：

npm install axios --save

建议使用npm的方式进行下载和安装

使用方法：

在安装好之后，就可以在需要使用的组件中引入，然后就可以使用了，我们先演示一下从本地获取数据：

数据源：

我们的数据源是一个json文件，存放在vue的public文件夹下面：

 在获取的时候，可以直接写成根目录下的data.json，因为在我们vue打包的时候，根目录由原来的项目路径变成了public，也就是index.html文件所在的文件夹，所以get的参数可以直接写成”/data.json"的形式，然后来看看文件中的数据形式：

 然后是网页端的渲染结果：

 可以看到，数据已经输出到网页中了；

API：

其中涉及到三个方法：get、then和catch

get方法就是用来表明数据源的地址

then方法就是对获取到的数据做的逻辑处理

catch方法就是当获取信息的时候如果出错了的处理逻辑

其实不写在mounted方法中也可以，可以给dom绑定一个可以触发方法的事件，然后在方法中使用axios请求就可以了

请求接口数据：

上面的案例演示了从本地获取数据，接下来演示从接口中获取数据，其实结构是完全一样的，只是将get的参数从原来的本地路径改成了接口路径：

代码实现：

接口数据：

显示效果：

接口地址：jsonplaceholder.typicode.com/posts

 这是一个免费的假的API接口，提供了一些虚拟的数据用来测试，就是有时候连接不是很稳定

GET请求方式：

get的请求方式，就是用来获取数据的请求方式，我们之前在案例中使用的都是get请求方式，我们用get请求方式从接口中获取数据并美化一下输出的形式：

显示效果：

 

代码实现：

数据源：http://jsonplaceholder.typicode.com/comments

因为请求的数据源是一个json文件，所以可以用“."的形式获取里面的具体数据，就是可以当作一个对象数据来使用

POST请求方式：

post请求方式是将数据传递到服务器端使用的，是一种提交方式：

代码实现：

显示效果：

因为axios会对请求的数据做一层封装，所以这里我们只需要看data节点的数据即可，可以看到我们确实将我们写入的数据进行的传递并在回调用显示出来了