vue怎么使用vue-resource发送ajax请求

Vue怎么使用vue-resource发送ajax请求

在使用Vue的过程中，有时候需要进行数据交互，从而动态更新页面，这时候就需要使用ajax。而vue-resource就是Vue的一款插件，用于实现http请求的库。那么接下来，我们就来一步步介绍Vue怎么使用vue-resource发送ajax请求。

第一步：安装vue-resource插件

首先，需要在项目中安装vue-resource插件，可以通过npm安装，打开控制台，输入以下命令：

npm install vue-resource

安装完成后，在Vue项目中引入vue-resource：

import Vue from 'vue'


import VueResource from 'vue-resource'

Vue.use(VueResource)

引入后，就可以在Vue中使用vue-resource来发送请求了。

第二步：发送http请求

使用vue-resource发送请求需要写在Vue组件的methods中：

methods: {


 getArticle() {
 this.$http.get('/api/article').then(response => {
 console.log(response)
 }, error => {
 console.log(error)
 })
 }

}

使用get方法，请求/api/article接口，并将得到的结果打印在控制台中。当然，也可以使用post、put、patch等方法来发送请求。

第三步：设置请求头、请求参数

使用vue-resource发送请求时，可能需要设置请求头或请求参数，如下所示：

this.$http.get('/api/article', {


 headers: {
 'Authorization': 'Bearer ' + this.token
 },
 params: {
 page: 1,
 size: 10
 }
}).then(response => {
 console.log(response)
}, error => {
 console.log(error)

})

在请求中设置headers，可以添加请求头信息，如上例中添加了Authorization授权。而params则是添加请求参数，比如page和size。

第四步：拦截器

有时候，需要在http请求前、请求后进行一些操作，这个时候，就需要使用拦截器。下面是一个例子：

Vue.http.interceptors.push((request, next) => {


 request.headers.set('Authorization', 'Bearer ' + this.token)
 next(response => {
 if (response.status === 401) {
 console.log('登录已失效，请重新登录')
 }
 })

})

上面这个例子中，通过Vue.http.interceptors.push()方法，向vue-resource添加一个拦截器。在拦截器中，可以设置请求头，也可以在请求结果返回后判断状态码，如果状态码为401，则提示登录失效，并进行相应操作。

总结

以上就是Vue怎么使用vue-resource发送ajax请求的全部内容。vue-resource是Vue实现数据请求的一个插件，只需要简单的安装及配置，就可以使用它来发送http请求。在实际的应用场景中，可以根据不同的需求，自由搭配各种方法、拦截器等，从而实现丰富的http请求功能，让数据交互变得更加简单高效。