Vue 项目中常用的 2 个 ajax 库
(一)vue-resource
vue 插件, 非官方库,vue1.x 使用广泛
vue-resource 的使用
在线文档 https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
下载
npm install vue-resource --save
编码
// 引入模块 ,注意应该在入口文件main.js中引入和声明
import VueResource from 'vue-resource'
// 声明使用
Vue.use(VueResource) //内部会给vm对象和组件对象添加一个属性:$http
// 通过 vue组件对象发送 ajax 请求(发送get请求)
this.$http.get('/someUrl?foo=bar').then(
response=>{//successcallback
console.log(response.data)//返回结果数据
},
response=>{//errorcallback
console.log(response.statusText)//错误信息
})
// 通过 vue组件对象发送 ajax 请求(发送post请求)
this.$http.post('/someUrl', {foo: 'bar'}).then(
response=>{//successcallback
console.log(response.data)//返回结果数据
},
response=>{//errorcallback
console.log(response.statusText)//错误信息
})
(二)axios
通用的 ajax 请求库, 官方推荐,vue2.x 使用广泛
axios 的使用
在线文档 https://github.com/axios/axios/blob/master/README.md
下载
npm install axios --save
编码
// 引入模块,无需声明,在组件中引入
import axios from 'axios'
// 发送 ajax 请求(发送get请求)
axios.get('/someUrl?foo=bar') .then(
response=>{//successcallback
console.log(response.data)// 得到返回结果数据
}) .catch(
error=>{
console.log(error.message)//错误信息
})
// 发送 ajax 请求(发送post请求)
axios.post('/someUrl', {foo: 'bar'}) .then(
response=>{//successcallback
console.log(response.data)// 得到返回结果数据
}) .catch(
error=>{
console.log(error.message)//错误信息
})