前言

在vue中ajax的框架有两种，一是vue-resource,二是axios

vue-resource

vue 插件, 非官方库, vue1.x 使用广泛，属于比较老的ajax框架

axios

通用的 ajax 请求库, 官方推荐, vue2.x 使用广泛,也是现在主流的ajax框架

正文

1.vue-resource

vue-resource的GitHub地址

https://github.com/pagekit/vue-resource

要想使用vue-resource 首先要安装vue-resource插件

npm install vue-resource

安装按成之后会在 package.json 文件里看到

vue-resource插件的版本

然后在main.js全局引用，vue-resource可以全局引用但axios不可以

main.js

import Vue from 'vue'
import App from './App'
import VueResource from 'vue-resource'

Vue.use(VueResource)//声明全局使用插件

new Vue({
el:'#app',//对应index.html的div的ID
components:{App},
template:'<App/>'
})

然后我们在网上找个测试api，测试下vue-resource

在app.vue里这样写

App.vue

<template>
<div id="app">
</div>
</template>

<script>
export default {
name: 'App',
components:{
},
mounted() {
let url='https://api.apiopen.top/loginUser'//测试api

this.$http.get(url).then(response=>{//使用箭头函数，不要使用functuon(){}这种老式写法
console.log(response.body);//body是vue-resource的一个接口
},response=>{//这里是错误提示

})
}

}
</script>

<style>
</style>

运行之后就可以看到在控制台返回了接口数据

2.axios

GitHub地址

https://github.com/axios/axios

安装
1.npm

npm install axios

2.bower

bower install axios

3.yarn

yarn add axios

4.cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

因为axios不能全局引入，所以在组件使用axios前都得引入

axios使用catch铺抓异常

App.vue

<template>
<div id="app">
</div>
</template>

<script>
import axios from 'axios'
export default {
name: 'App',
components:{
},
mounted() {
let url='https://api.apiopen.top/loginUser'

axios.get(url).then(response=>{
console.log(response.data);
}).catch(error=>{
alert("请求失败!")
})
}

}
</script>

<style>
</style>

返回数据