VUE教程（第十节）

今天介绍的是axios这个技术，就是vue常用的数据交互方法插件，这个和jQuery的ajax是差不多的东东，我们先把axios下载一下，npm install axios -s就搞定咯，然后我们在main文件里面引入：

main代码.png

——》我们采用的是挂载在vue原型链的方法，当然，还有其他方式，这种方式已经可以满足大部分的需求了，而且操作上很简单，所以这里我们就介绍这个方式，但是你要知道，这种方式在单独的js文件是不能使用axios的，因为没有对应的实例出来，挂载完毕后我们就看看如何使用：

使用代码1.png

——》我们先定义出三个方法的按钮，分别是发送get请求，发送post请求，和发送一个叫all的请求，后面我会介绍：

使用代码2.png

使用上需要使用this.axios.post()这是固定模式，然后写入两个参数，分别是请求的地址和请求的参数，后面接一个.then（）的方法，这个方法里面有个匿名函数，接收的是发送成功时候返回的参数，还有一个方法是.catch（），这个方法接收的是发送失败时候的处理，发送失败是指报了404之类的错误的时候，就是这么的简单操作，还有一个是all，这是什么意思呢，我们看看代码：

使用代码3.png

当我们要同时发送两个请求时候，只需要定义出函数，然后使用axios.all()这个方法就可以，传入需要同时发送的请求数组，然后在后面拿到请求回来的参数即可，是不是非常简单操作，对于axios的请求，除了get和post还有其他的：

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

看看吧，都在这里了，用法基本类似，在此不重复写实例了。

这一节讲完，基础课程就算全部都讲完了，这十节课程都搞懂，基本上vue是可以完成大部分的开发内容了，涉及一些细节问题，还是需要在实际开发过程中慢慢积累的，一些小技巧，一些方法，将会在vue系列的奇技淫巧系列慢慢的和大家分享。

公众号