Vue学习--Ajax(axios)（五）

vue的ajax

vue的ajax常见的有两种 ,一种是 vue-resource,一种是axios

vue-resource的用法:

是vue的插件,非官方库, vue1.x 使用广泛

如何使用:

先在vue的脚本架上安装vue-resorce库

npm install vue-resource --save

在我们需要用到ajax的页面上引入,一般我是直接在main.js文件上引入,后面就不需再次引入,直接引用

// 引入模块

import VueResource from 'vue-resource' ,

// 使用插件
Vue.use(VueResource)
 
// 通过 vue/组件对象发送 ajax 请求
this.$http.get('/someUrl').then((response) => {
// success callback
console.log(response.data) //返回结果数据
}, (response) => {
// error callback
})

axios的用法:

跟vue-resource的用法类似,用之前需要安装axios库

npm install axios --save

axios直接引入后,就可直接调用,不用像vue-resource,插入插件()省了一小步)

// 引入模块
import axios from 'axios'
// 发送 ajax 请求
axios.get(url)
.then(response => {
console.log(response.data) // 得到返回结果数据
})
.catch(error => {
console.log(error.message)
})