第4章 ajax-脚手架版

http://www.cnblogs.com/rogerwu/p/7610478.html
数据来源：
http://www.softeem.xin/maoyanApi/ajax/movieOnInfoList
跨域参考下一节 vue电影app

axios简介

有很多时候你在构建应用时需要访问一个 API 并展示其数据。做这件事的方法有好几种，而使用基于 promise 的 HTTP 客户端 axios 则是其中非常流行的一种。
promise 简介：https://segmentfault.com/a/1190000007032448

特点

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF

引用

cnpm install axios --save
cnpm install --save vue-axios

项目中引入main.js

    //以下4行引入axios
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    axios.defaults.withCredentials = false//这个默认即为false，如果改为true，可以传递          session信息，后端要做相应修改来放行，
    Vue.prototype.$axios = axios;   //在vue中使用axios

简单实例

    <template>
      <div>
        <button @click="getMovieList">获取影片列表</button>

      </div>
    </template>

   <script>
  export default {
    data() {
      return {}
    },
      methods: {
      getMovieList: function() {
        //请求https://m.maoyan.com/ajax/movieOnInfoList获取电影列表
        //axios
             this.$axios.get("/api/ajax/movieOnInfoList")
             .then(response=>{
               console.log(response.data);
             })
             .catch(error=>{
               console.log(error);
             })
      }
    }
  }
</script>

<style>
</style>

二、请求格式例子

https://blog.csdn.net/h330531987/article/details/79319641

1、 发送一个GET请求

//通过给定的ID来发送请求
axios.get('/user?ID=12345')
  .then(response=>{
console.log(response);
  })
  .catch(err=>{
console.log(err);
  });
//以上请求也可以通过这种方式来发送
axios.get('/user',{
  params:{
ID:12345,username:wang.qj
  }
})
.then(response=>{
  console.log(response);
})
.catch(err=>{/
  console.log(err);
});

2、 发送一个POST请求

axios.post('/user',{
  firstName:'Fred',
  lastName:'Flintstone'
})
.then(res{
  console.log(res);
})
.catch(err=>{
  console.log(err);
});

3、 一次性并发多个请求(了解)

    <template>
      <div>
        <button @click="getMovieList">获取影片列表</button>

      </div>
    </template>

   <script>
  export default {
    data() {
      return {}
    },
    created() {
      var axios = this.$axios;
      function getCommingList() {
        return axios.get(
          "/api/ajax/comingList?ci=57&token=&limit=10"
        );
      }

      function getHopeList() {
        return axios.get(
          "/api/ajax/mostExpected?ci=57&limit=10&offset=0&token="
        );
      }
       //一次性发两个请求
        //1、我希望看的2、将上映的
      this.$axios.all([getHopeList(), getCommingList()])
        .then(axios.spread(function(res1, res2) {
          console.log("res1", res1.data)
          console.log("res2", res2.data)
        }))


    }, 
    methods: {
      getMovieList: function() {
        //请求https://m.maoyan.com/ajax/movieOnInfoList获取电影列表
        //axios
             this.$axios.get("/api/ajax/movieOnInfoList")
             .then(response=>{
               console.log(response.data);
             })
             .catch(error=>{
               console.log(error);
             })
      }
    }
  }
</script>

<style>
</style>

实例1根据响应更新本地数据

    <template>
      <div>
        <button @click="getMovieList">获取影片列表</button>
        <!-- step3 页面上显示数据-->
        <ul v-for="movie in mvList">
          <li>{{movie.id}}</li>
          <li>{{movie.nm}}</li>
          <li>{{movie.img}}</li>
           <li><img :src="movie.img.replace('w.h','200.300')"></li>
        </ul>
      </div>
    </template>

   <script>
  export default {
    data() {
      return {
        //第一步，在data里准备一下空的list，方便后续请求回来后更新
        mvList:[]
      }
    },
 /*   created() {
      var axios = this.$axios;
      function getCommingList() {
        return axios.get(
          "/api/ajax/comingList?ci=57&token=&limit=10"
        );
      }

      function getHopeList() {
        return axios.get(
          "/api/ajax/mostExpected?ci=57&limit=10&offset=0&token="
        );
      }
       //一次性发两个请求
        //1、我希望看的2、将上映的
      this.$axios.all([getHopeList(), getCommingList()])
        .then(axios.spread(function(res1, res2) {
          console.log("res1", res1.data)
          console.log("res2", res2.data)
        }))


    }, */
    methods: {
      getMovieList: function() {
        //请求https://m.maoyan.com/ajax/movieOnInfoList获取电影列表
        //axios
             this.$axios.get("/api/ajax/movieOnInfoList")
             .then(response=>{
               console.log(response.data.movieList);
                //step2 响应回来后，用响应的list更新我自己的list
                this.mvList=response.data.movieList;

             })
             .catch(error=>{
               console.log(error);
             })
      }
    }
  }
</script>

<style>
</style>