vue-resourc发起异步请求的方法

下面是vue-resource发起异步请求的方法的完整攻略。

安装vue-resource

首先需要在项目中安装vue-resource：

npm install vue-resource --save

然后在项目中使用vue-resource：

import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)

发起GET请求

使用vue-resource发起一个GET请求非常简单，只需要调用Vue.resource(url)方法即可。下面是一个简单的示例：

Vue.resource('https://jsonplaceholder.typicode.com/posts/1').get().then(response => {
  console.log(response.body)
})

发起POST请求

使用vue-resource发起一个POST请求也很简单，只需要在调用Vue.resource(url)方法之后调用post方法即可。下面是一个示例：

Vue.resource('https://jsonplaceholder.typicode.com/posts').post({ title: 'foo', body: 'bar', userId: 1 }).then(response => {
  console.log(response.body)
})

使用POST请求时，可以通过第二个参数传递请求的数据。如果需要使用application/x-www-form-urlencoded格式提交数据，可以将请求数据转为URLSearchParams类型的对象，如下所示：

const params = new URLSearchParams()
params.append('title', 'foo')
params.append('body', 'bar')
params.append('userId', 1)

Vue.resource('https://jsonplaceholder.typicode.com/posts').post(params).then(response => {
  console.log(response.body)
})

发起PUT请求

使用vue-resource发起一个PUT请求也很简单，只需要在调用Vue.resource(url)方法之后调用put方法即可。下面是一个示例：

Vue.resource('https://jsonplaceholder.typicode.com/posts/1').put({ title: 'foo', body: 'bar', userId: 1 }).then(response => {
  console.log(response.body)
})

使用PUT请求时，同样可以通过第二个参数传递请求的数据。

发起DELETE请求

使用vue-resource发起一个DELETE请求也很简单，只需要在调用Vue.resource(url)方法之后调用delete方法即可。下面是一个示例：

Vue.resource('https://jsonplaceholder.typicode.com/posts/1').delete().then(response => {
  console.log(response.body)
})

以上就是使用vue-resource发起异步请求的方法攻略，希望能对你有所帮助。