axios数据请求 《2》

//引入
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>

 <div id="app">
    <div class="container">
      <div class="row">
        <h3> 静态请求【 模拟数据  】 </h3>
          <button type="button" class="btn btn-primary" @click = "getStatic" > getJson </button>
          <hr>
        <h3> 动态请求 【 真实接口】 </h3>
          <button type="button" class="btn btn-primary" @click = "get"> get </button>
          <button type="button" class="btn btn-primary" @click = "post"> post </button>
      </div>
    </div>
  </div>

下面的 axios() 换成  this.$http就可以了

    但是 vue-resource是有一个方法叫做 jsonp是axios没有的
  */
  // 以下代码是统一设置post请求的请求头
  axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  new Vue({
    el: '#app',
    methods: {
      getStatic () {
        // 获取静态数据
        // console.log( axios(options) )
        // console.log( axios({}) ) // Promise

        // axios.get()
        // axios.post()

        axios({
          url: './mock/data/movie.json',
          method: 'GET'
        }).then( res => console.log( res ))
          .catch( error => console.log( error ))

      },
      get () {
        // axios
        //   .get('http://localhost/get.php',{
        //     params: {
        //       a: 1,
        //       b: 2
        //     }
        //   })
        //   .then( res => console.log( res ))
        //   .catch( error => console.log( error ))


          axios({
            url: 'http://localhost/get.php',
            method: 'GET',
            params: {
              a: 1,
              b: 2
            }
          }).then( res => console.log( res ))
            .catch( error => console.log( error ))
      },
      post () {
        // axios.post('http://localhost/post.php',{
        //   a: 1,
        //   b: 2
        // }).then( res => console.log( res ))
        //   .catch( error => console.log( error ))
        const params = new URLSearchParams()
        // params.append(key,value)
        params.append('a',1)
        params.append('b',2)
        axios({
          method: 'post',
          url: 'http://localhost/post.php',
          data: params
        }).then( res => console.log( res ) )
          .catch( error => console.log( error ))
      }
    }
  })