Vue通过axios异步请求后端接口的方法

npm install axios

yarn add axios

// src/axios.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com', // 配置基础URL
  timeout: 1000, // 配置请求超时时间
  headers: {'X-Custom-Header': 'foobar'} // 配置默认请求头
});

export default instance;

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

<script>
import axios from '../axios'; // 导入配置好的Axios实例

export default {
  data() {
    return {
      items: []
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('/items');
        this.items = response.data;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }
  }
};
</script>

// src/axios.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  console.log('Request:', config);
  return config;
}, function (error) {
  // 处理请求错误
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  console.log('Response:', response);
  return response;
}, function (error) {
  // 处理响应错误
  return Promise.reject(error);
});

export default instance;

<template>
  <div>
    <h1>用户列表</h1>
    <button @click="fetchUsers">刷新用户</button>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} <button @click="deleteUser(user.id)">删除</button>
      </li>
    </ul>
    <input v-model="newUserName" placeholder="输入新用户姓名" />
    <button @click="addUser">添加用户</button>
  </div>
</template>

<script>
import axios from '../axios';

export default {
  data() {
    return {
      users: [],
      newUserName: ''
    };
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await axios.get('/users');
        this.users = response.data;
      } catch (error) {
        console.error('获取用户失败:', error);
      }
    },
    async addUser() {
      if (!this.newUserName) return;
      try {
        const response = await axios.post('/users', {
          name: this.newUserName
        });
        this.users.push(response.data);
        this.newUserName = '';
      } catch (error) {
        console.error('添加用户失败:', error);
      }
    },
    async deleteUser(userId) {
      try {
        await axios.delete(`/users/${userId}`);
        this.users = this.users.filter(user => user.id !== userId);
      } catch (error) {
        console.error('删除用户失败:', error);
      }
    }
  },
  mounted() {
    this.fetchUsers();
  }
};
</script>

vue create vue3-axios-crud

cd vue3-axios-crud

npm install vue-router@next

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import UserList from '../components/UserList.vue';

const routes = [
  {
    path: '/',
    name: 'UserList',
    component: UserList
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import axios from './axios';

const app = createApp(App);
app.use(router);
app.config.globalProperties.$axios = axios; // 将axios挂载到全局属性上，方便在组件中使用
app.mount('#app');

npm run serve