Vue.js数据请求方式

一、 vue-resource

1>通过 yarn 或者 NPM.安装

$ yarn add vue-resource
$ npm install vue-resource

2>在main.js中引用并使用它

import VueResource from 'vue-resource'
Vue.use(VueResource)

3>vue-resource中常用的请求方式（jsonp请求解决跨域问题）

this.$http.get('/someUrl', [config]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);
this.$http.jsonp('/someUrl', [config]).then(successCallback, errorCallback);

4>案例
(1)带有参数的post请求

{
// POST /someUrl
this.$http.post('/someUrl', {foo: 'bar'}).then(response => {
// get status
response.status;
// get status text
response.statusText;
// get 'Expires' header
response.headers.get('Expires');
// get body data
this.someData = response.body;
}, response => {
// error callback
});
}

（2）发送带有URL查询参数和自定义头的GET请求。

 this.$http.get('/someUrl', {params: {foo: 'bar'}}).then(response => {
// success callback
}, response => {
// error callback
});

更多相关需求请看官网文档：
https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

二、axios

1>使用npm安装

$ npm install axios

2>使用案例
（1）带参数的get请求

const axios = require('axios');
//一定要引入哦
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});

（2）带参数的post请求

const axios = require('axios');
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

以上两种方式还可以通过将相关配置传递给axios来发出请求。例如

// Send a POST request
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});

更多相关需求请看官网文档：https://github.com/axios/axios

最后

以上就是成就蓝天为你收集整理的Vue.js数据请求方式一、 vue-resource二、axios的全部内容，希望文章能够帮你解决Vue.js数据请求方式一、 vue-resource二、axios所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。