vue---实现http请求（vue-resource和axios）

vue-resource和axios均能实现http请求，但vue-resource已宣布不再维护了，所以推荐大家使用axios

---

vue-resource

1、安装【npm install vue-resource --save-dev】

2、全局配置，可以放在【main.js】中

    【import VueResource from 'vue-resource'】

    【Vue.use(VueResource)】

3、以get数据为例进行用法说明

    【this.$http.get("url")】

 created() {
    this.$http.get(
        "https://wd******hatwni.wilddogio.com/posts/" + this.id + ".json"
      )
      .then(function(data) {
        console.log("输出data", data);
        return data.json();
      })
      .then(function(data) {
        this.blog = data;
      });
  },

axios

1、安装【npm i axios --save-dev】

2、全局配置，可以放在【main.js】中

    【import axios from 'axios'】

    【axios.defaults.baseURL = 'https://wd********hatwni.wilddogio.com'】

3、以get数据为例进行用法说明

错误示例

 created() {
    axios.get(
        "/posts/" + this.id + ".json"
      )
      .then(function(data) {
        console.log("输出data", data);
        return data.json();
      })
      .then(function(data) {
        this.blog = data;
      });
  },

控制台报错信息如下：

错误示例

 created() {
    axios.get(
        "/posts/" + this.id + ".json"
      )
      .then(function(data) {
       this.blog=data.data;
      })
  },

控制台报错信息如下：

正确示例

加上代码【var _this = this;】

 created() {
    var _this = this;
    axios.get(
        "/posts/" + this.id + ".json"
      )
      .then(function(data) {
       _this.blog=data.data;
      })
  },

进一步，如果使用了es6中的箭头函数，则不需要加【var _this = this;】将上面的正确版本代码优化如下：

 created() {
    axios.get(
        "/posts/" + this.id + ".json"
      )
      .then(data=>{
       this.blog=data.data;
      })
  },