vue-resource与axios的区别与使用
2020-07-12 17:18
90 查看
目录
一、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) { //两个请求现已完成 }));
相关文章推荐
- VUE-RESOURCE 和 AXIOS的区别
- vue的两种ajax框架vue-resource与axios的简单使用
- vuejs中vue-resource或使用axios发送请求及解决跨域问题
- 如何使用vue-resource或axios发送http请求
- 浅谈vue-resource和vue-axios的区别
- VUE-RESOURCE 和 AXIOS的区别
- vue中使用vue-resource、axios、fetch-jsonp请求数据
- vue-resource和vue-axios的简单使用方法
- vue-resource和axios区别
- vue http请求工具vue-resource&axios的使用
- Vue.js——使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用【6】
- vue 中使用axios
- vue2.0之axios使用详解(二)
- vue2.0之axios使用详解(一)
- vue使用resource传参数
- vue.js插件使用(01) vue-resource
- Vue.js实战之使用Vuex + axios发送请求详解
- vue.js在laravel框架中的拦截器 ( axios)的使用--实现判断用户登录
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)