axios数据请求《3》 --fetch

最新推荐文章于 2023-10-15 16:06:36 发布

原创最新推荐文章于 2023-10-15 16:06:36 发布 · 221 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在Vue项目中使用Fetch API进行静态和动态数据请求，包括GET和POST方法，展示了具体的代码实现和错误处理策略。

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

<!-- html部分-->
	<div id="app">
      <div class="container">
        <div class="row">
          
          <h3> 静态请求【 模拟数据  】 </h3>
            <button type="button" class="btn btn-primary" @click = "getStatic" > getJson </button>
          <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>

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));

      }
    }
  })