vue-resource与axios的区别与使用

一、vue-resource

vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。

vue-resource插件具有以下特点：
1.体积小
vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。
2.支持主流的浏览器
和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。
3.支持Promise API和URI Templates
Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。
URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。
4.支持拦截器
拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。
拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。

1.vue-resource的安装

安装方式一：

npm install vue-resource --save	

2.在main.js中导入

import VueResource from 'vue-resource' //引入
Vue.use(VueResource)  //使用

安装方式二：
1、直接在页面中，通过script标签，引入 vue-resource的脚本文件；
2、引入vue.js和vue-resource.js,注意先后顺序，先引vue.js。
3、所有vue插件都需要在vue.js之后加载。

2.使用vue-resource发送请求

1.发送get请求

getInfo(){
    this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(result=>{
        console.log(result.body)
    })
 }

2.发送post请求

post 方法接收三个参数：
参数1： 要请求的URL地址
参数2： 要发送的数据对象格式
参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded

postInfo(){
//手动发起的post请求，默认没有表单格式，所以，有的服务器处理不了，通过post方法的第三个参数{ emulateJSON: true }设置提交的内容类型为普通表单数据格式。
     this.$http.get('http://127.0.0.1:8899/api/getlunbo',{},{ emulateJSON: true })
     .then(result=>{console.log(result.body)})
}

3.发送json请求

getInfo(){// JSONP形式从服务器获取数据
    this.$http.json('http://127.0.0.1:8899/api/getlunbo').then(result=>{
        console.log(result.body)
    })
 }

vue-resource的请求API是按照REST风格设计的，它提供了7种请求API：

get(url, [options])
head(url, [options])
elete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])

注意：
1.url，请求地址。可被options对象中url属性覆盖。
2.body（可选，字符串或对象），要发送的数据，可被options对象中的body属性覆盖。
3.options 请求选项对象

二、axios

vue2.0之后，就不再对vue-resource更新，而是推荐使用axios。

功能特性
1、在浏览器中发送 XMLHttpRequests 请求
2、在 node.js 中发送 http请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求和响应数据
6、取消请求
7、自动转换 JSON 数据
8、客户端支持保护安全免受 CSRF/XSRF 攻击

1.安装axios

1.$ npm install axios --save

2.在需要的文件中引入axios

import axios from 'axios'

2.使用axios发送请求

1.发送get请求

// 向具有指定ID的用户发出请求
axios.get('/user?id=123').then(function (response) {
	console.log(response);
})
.catch(function (error) {
	console.log(error);
});
 
// 也可以通过 params 对象传递参数
axios.get('/user', {
	params: { id: 123 }
})
.then(function (response) {
	console.log(response);
})
.catch(function (error) {
	console.log(error);
});

2.发送post请求

axios.post('/user', {
	firstName: 'One',
	lastName: 'Second'
})
.then(function (response) {
	console.log(response);
})
.catch(function (error) {
	console.log(error);
});

3.执行多个并发请求

function getUserID() {
	return axios.get('/user/123');
}
 
function getUserCompelete() {
	return axios.get('/user/123/compelete');
}
 
axios.all([getUserID(), getUserCompelete()])
	.then(axios.spread(function (user_id, uesr_com) {
//两个请求现已完成
}));