vue.js 与服务端通信

// 在 Vue.js 中使用代理
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
};

axios.get('/api/data', { timeout: 5000 }); // 设置超时时间为5秒

// 前端处理响应数据
axios.get('/api/data')
  .then(response => {
    const data = response.data;
    // 进行数据转换或验证
  });

axios.get('/api/data')
  .then(response => {
    // 处理成功响应
  })
  .catch(error => {
    console.error('There was an error!', error);
    // 显示错误信息
  });

<template>
  <div>
    <h1>Data from Server</h1>
    <ul>
      <li v-for="item in data" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: []
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('/api/data')
        .then(response => {
          this.data = response.data;
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    }
  }
};
</script>