axios数据请求

 <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

  <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>

 /* 
    引入axios   cdn之后我们会得到一个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 ))
      }
    }
  })