vue之三种请求资源方式

//今天回顾一下vue的三种请求资源方式(vue-resource.fetch,axios),并且学习一下第三种axios方式的封装

一、vue-resource请求

//从vue的2.0开始，作者表示vue-resource不再维护了(所以这个会使用即可)

• get请求

<div id="app">
      <ul>
          <li v-for="book in books">{
  {book.title}}</li>
      </ul>
     <button @click="get">发起http请求</button>
 </div>      
 
<script src="./base/vue.js"></script>
//使用vue-resource需要引入这个插件
<script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>
    <script>
    //引入vue-resource之后，那么他就可以在vue实例/组件 上面绑定一个$http的一个属性。
    new Vue({
        el:"#app",
        data:{
            books:[]
        },
        methods:{
            get(){
                this.$http.get("./json/temp.json").then(res=>{
                //返回的的是一个对象res,而我们需要的资源都在res.data里
                    this.books = res.data.books
                })
            }
        }
    })
    </script>

---

• jsonp请求
  //因为get和jsonp只是在请求时多了一个params参数对象,所以就不做过多cv,使用该方法仅需覆盖掉get方法即可

jsonp(){
                    this.$http.jsonp("http://suggest.taobao.com/sug?code=utf-8",{
                        params:{
                            q:this.good
                        }
                    }).then(res=>{
                        console.log(res)
                        this.r