axios数据请求 《3》 --fetch

  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


	<div id="app">
      <div class="container">
        <div class="row">
          
          <h3> 静态请求【 模拟数据  】 h3>
             getJson button>
          <h3> 动态请求 【 真实接口】 h3>
             get button>
             post button>
        div>
      div>
    div>

new Vue({
    el: '#app',
    methods: {
      getStatic () {
        //使用fetch请求mock数据

        fetch('./mock/data/data.json')
          .then( res => res.json() )  // 数据格式化 
          .then( data => console.log( data ))  // 获取数据格式化的数据
          .catch( error => console.log( error )) // 错误捕获

      },
      get () {
        //使用fetch请求动态数据  get

        fetch('http://localhost/get.php?a=1&b=2')
          .then( res => res.text() )  // 数据格式化 
          .then( data => console.log( data ))  // 获取数据格式化的数据
          .catch( error => console.log( error )) // 错误捕获

      },
      post () {
        // 使用post请求动态数据

        fetch('http://localhost/post.php', {
          method: 'POST', // or 'PUT'
          body: new URLSearchParams([['a',1],['b',2]]).toString(),
          headers: new Headers({
            'Content-Type': 'application/x-www-form-urlencoded'
          })
        }).then(res => res.text())
        .catch(error => console.error('Error:', error))
        .then(response => console.log('Success:', response));

      }
    }
  })