Vue全家桶学习（一）

Vue-resource 插件与axios插件的使用

一、Vue-resorce插件

    1. get请求

get: function () {
         this.$http.get("data.json", {
              params: {
                     userId: "101",
                },
                headers: {
                     token: "abcd"
                }
              }).then(res => {
                   this.msg = res.data;
              },error => {
                   this.msg = error;
              })
           }

     2. post 请求

this.$http.post("data.json", {
        userId: "102"
      },
       {emulateJSON : true}
     ).then(res=>{
        this.msg = res.data;
      }, error => {
        this.msg = error;
   })

    3.jsonp请求

     

 this.$http.jsonp("http://www.imooc.com/course/AjaxCourseMembers?ids=796").then(res=>{
                        this.msg = res.data;
                    })

    4. 全局拦截器的使用

Vue.http.interceptors.push(function (req, next) {
                    console.log('请求已被拦截')
                    next(function (res) {
                        return res;
                    });
                })

二、axios插件

    1. get请求

get: function () {
                    axios.get("data.json", {
                        params: {
                            userId: "999"
                        },
                        headers: {
                            token: "jacd"
                        }
                    }).then(res=>{
                        this.msg = res.data;
                    }).catch(function (error) {
                        console.log("error init" + error)
                    })
                },

    2. post请求

post: function () {
                    axios.post("data.json", {
                        userId: "888"
                    }, {
                        headers: {
                            token: "tom"
                        } 
                    }).then( res =>{
                        this.msg = res.data;
                    }).catch(function(err){
                        console.log("error init" + err);
                    })
                },

    3. 全局拦截器的使用

axios.interceptors.request.use(function(config){
                   console.log("request init");
                   return config;
               });
               axios.interceptors.response.use(function(response){
                   console.log("response init");
                   return response;
               })