vue-resource与axios的区别与使用

vue教程

首页 > 前端框架 > vue教程 >

 shitouadmin  2023-06-24 23:17:59 

一、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

.$ 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) {

//两个请求现已完成

}));