Vue-resource和Vue-axios

Vue-resource以及vue axios

vue-resource：

vue是数据驱动的，在vue中实现异步加载需要使用vue-resource库，vue-resource是Vue.js中的一款插件，它通过XMLHttpRequest或JSONP发起请求并进行处理。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。话不多说直接进入正题

vue-resource的安装
1，一般学习的时候可以通过cdn加速服务直接引入：

,

2，也可以自己引入js文件，地址：

https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js

3，通过npm进行安装（在用vue-cli构建项目成功的基础下）：

cnpm install --save vue-resource

安装完成后

进入main.js引入vue-resource：

import  VueResource from  'vue-resource'

安装并使用vue-resource插件：

Vue.use(VueResource)

注意：Vue.use(VueResource)这一步是为this.$http做准备，其中Vue是所有实例对象的构造函数。
相当于：Vue.prototype.$http --> this(实例).$http

引入完成后进入App.vue文件中：

书写网络请求：
关于this.$http， vue-resource提供了其中请求API：

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

url：请求的地址
body：请求发送的数据
options：返回的都是promise对象

export default {
  name: 'App',
  data(){
      return{
		
      }
  },
  created(){
    this.$http.get('请求的url').then(res=>{    //成功的回调
      console.log(res)   //打印请求到的数据
    },err=>{   //失败的回调
      console.log(err)
    })
  }
}

结果如下：

这样就请求成功了。

vue-axios：

首先从vue2.0之后，官方就不再维护vue-resource了，出于安全性的考量官方推荐大家使用axios，axios也被越来越多的人了解，之前学习的时候本来想在网上找一些详细的攻略，但是其实axios的官方文档已经非常详细，下面是我个人的一些理解。

axios简介：

首先axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端
特征：

• 从浏览器中发送 XMLHttpRequest
• 在 node.js 发出 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防止 CSRF/XSRF攻击

浏览器支持：

引入方式：
1：bower安装：

$ bower install axios

2：cdn加速服务引入：

3：npm安装（建议使用淘宝加速服务）：

$ cnpm install axios -s

和vue-resource一样，我们在main.js文件中引入

//引入vue-axios
import  Axios from  'axios'

给Vue原型挂载一个属性

Vue.prototype.$axios = Axios

引入完成后进入App.vue文件中：
请求的API:
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

注意：
当使用别名方法时， url、 method 和 data 属性不需要在 config 参数里面指定。

App.vue代码如下

export default {
  name: 'App',
  data(){
      return{

      }
  },
  created(){
    this.$axios.get('https://www.apiopen.top/meituApi?page=1').then(res=>{
      console.log(res)
    })
      .catch(err=>{
        console.log(err)
      })
  }
}

请求结果如下：

一个简单的axios请求就实现了

补充： 执行多个并发请求：

function getBoss() {
return axios.get('url地址');
}
 
function getUser() {
return axios.get('url地址');
}
 
axios.all([getBoss(), getUser()])
.then(axios.spread(function (acct, perms) {
//两个请求现已完成
}));

以上就是我对resource和axios的一些简单的介绍，如果有不正确的地方还希望评论指正，十分感谢。