Vue.js学习笔记——请求数据的几种方式（v-resource，axios）

一、 v-resource

1. 在搭建好脚手架之后，安装v-resource ——

npm/cnpm install v-resource --save

2. 在main.js中进行注册           

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

3. 使用

基于全局Vue对象使用http

Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

在一个Vue实例内使用$http

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

在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。

举个栗子：

this.$http.get('http://jsonplaceholder.typicode.com/posts')
        .then(function(data){
            // console.log(data)
            this.blogs = data.body.slice(0,10);
            console.log(this.blogs)

        })

其中.then(function(data){})强烈建议将其改为ES6的箭头函数——data => {},用以防止this的指向出现问题

 

二、axios

由于v-resource在后续的版本不再更新，所以现在主流使用的请求数据工具是 axios 

具体文档可查看使用说明：https://www.kancloud.cn/yunye/axios/234845

1. 安装 cnpm install axios --save

2. 注册

import axios from 'axios'

3.使用（使用get/post按照实际情况决定）

​
axios.get("https://wd6439573863iggxjt.wilddogio.com/posts.json")
        .then(function(data){
            return data.data

        })

​

4. 补充

多次请求相同的IP地址可使用类似

axios.defaults.baseURL = 'https://wd6439573863iggxjt.wilddogio.com'

来对axios请求的网址进行处理，如下

axios.get("/posts.json")
        .then(function(data){
            return data.data

        })

除此之外axios还有许多属性，未来再见。