vue点击ajax请求,vue发送ajax请求

一、vue-resource

1、简介

一款vue插件，用于处理ajax请求，vue1.x时广泛应用，现不被维护。

2、使用流程

step1：安装

【命令行输入】

npm install vue-resource --save

step2：引入

【main.js】

// 引入vue-resource

import vueresource from 'vue-resource'

// 使用vue-resource

vue.use(vueresource)

step3：编码

【格式：】

this.$http.get().then() 返回的是一个promise对象

step4：完整代码

【使用vue-cli创建项目】

https://www.cnblogs.com/l-y-h/p/11241503.html

【main.js】

import vue from 'vue'

import app from './app.vue'

// 引入vue-resource

import vueresource from 'vue-resource'

// 使用vue-resource

vue.use(vueresource)

vue.config.productiontip = false

new vue({

render: h => h(app),

}).$mount('#app')

【app.vue】

loading...

most star repository is {{repositoryname}}

export default {

data() {

return {

repositoryurl : '',

repositoryname : ''

}

},

mounted() {

// 发ajax请求，用以获取数据，此处地址意思是查询 github中 vue 星数最高的项目

const url = 'https://api.github.com/search/repositories?q=vue&sort=stars';

this.$http.get(url).then(

response => {

const result = response.data.items[0];

console.log(result)

this.repositoryurl = result.html_url;

this.repositoryname = result.name;

},

response => {

alert('请求失败');

},

);

}

}

step5：截图：

请求正常

点击链接跳转

使用错误的地址

弹出错误提示框

二、axios

1、简介

一款vue库，用于处理ajax请求，vue2.x时广泛应用。

2、流程

step1：安装

【命令行输入】

npm install axios --save

step2：引入

【在哪里使用，就在哪里引入】

import axios from 'axios';

step3：完整代码

【main.js】

import vue from 'vue'

import app from './app.vue'

vue.config.productiontip = false

new vue({

render: h => h(app),

}).$mount('#app')

【app.vue】

loading...

most star repository is {{repositoryname}}

import axios from 'axios';

export default {

data() {

return {

repositoryurl : '',

repositoryname : ''

}

},

mounted() {

// 发ajax请求，用以获取数据，此处地址意思是查询 github中 vue 星数最高的项目

const url = 'https://api.github.com/search/repositories?q=vue&sort=stars';

axios.get(url).then(

response => {

const result = response.data.items[0];

console.log(result)

this.repositoryurl = result.html_url;

this.repositoryname = result.name;

}

).catch(

response => {

alert('请求失败');

},

);

}

}

step5：截图与上面的 vue-resource 一样，此处不重复截图。