Vue Fetch

Fetch API基本

fetch(url, options)
    .then(response => response.json())
    .then(data => {
        // 处理返回的数据
    })
.catch(error => {
    // 处理请求错误
});

封裝請求

在專案src目錄下新增request.js的文件並且 export

export default {
  // GET請求
  get(url, params = {}) {
    if (params) {
        //
      url += '?' + Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
    }
    return fetch(url)
      .then(response => response.json())
      .catch(error => {
        console.error('Request failed:', error);
        throw new Error(error);
      });
  },
  
  // POST請求
  post(url, data) {
    return fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    })
      .then(response => response.json())
      .catch(error => {
        console.error('Request failed:', error);
        throw new Error(error);
      });
  },
  
  // PUT請求
  put(url, data) {
    return fetch(url, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    })
      .then(response => response.json())
      .catch(error => {
        console.error('Request failed:', error);
        throw new Error(error);
      });
  },
  
  // DELETE請求
  delete(url) {
    return fetch(url, {
      method: 'DELETE',
    })
      .then(response => response.json())
      .catch(error => {
        console.error('Request failed:', error);
        throw new Error(error);
      });
  },
};

引入頁面使用

<template>
  <div>
    <!-- 展示数据 -->
  </div>
</template>

<script>
import request from '@/api/request.js';

export default {
  name: 'ExampleComponent',
  data() {
    return {
      data: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
        //
      request.get('/api/data')
        .then(response => {
          this.data = response;
        })
        .catch(error => {
          console.error('error);
        });
    },
    postData() {
      const data = {
        // 提交的数据
      };
      request.post('/api/data', data)
        .then(response => {
          // 处理返回结果
        })
        .catch(error => {
          console.error(error);
        });
    },
   
  },
};
</script>