Vue:Ajax - 技术栈

AJAX 允许我们在不刷新页面的情况下与服务器交互，实现：动态加载数据，提交表单信息，实时更新内容，与后端 API 通信。通常使用专门的 HTTP 客户端库来处理 AJAX 请求。

bash 复制代码

npm install axios

javascript 复制代码

import axios from 'axios';

export default {
  data() {
    return {
      users: []
    };
  },
  async mounted() {
    try {
      const response = await axios.get('https://api.example.com/users');
      this.users = response.data;
    } catch (error) {
      console.error('获取用户数据失败:', error);
    }
  }
};

创建 Axios 实例

javascript 复制代码

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

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// 请求拦截器
api.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 响应拦截器
api.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response.status === 401) {
      // 处理未授权
    }
    return Promise.reject(error);
  }
);

export default api;

AJAX 请求的最佳实践

1在合适的生命周期钩子中发起请求

created/mounted ：组件初始化时获取数据
watch：监听路由或参数变化时重新获取数据

javascript 复制代码

watch: {
  '$route.params.id': {
    handler(newId) {
      this.fetchData(newId);
    },
    immediate: true // 立即执行一次
  }
}

2处理加载状态

javascript 复制代码

data() {
  return {
    isLoading: false,
    data: null,
    error: null
  };
},
methods: {
  async fetchData() {
    this.isLoading = true;
    this.error = null;
    
    try {
      this.data = await api.get('/data');
    } catch (err) {
      this.error = err.message;
    } finally {
      this.isLoading = false;
    }
  }
}

避免内存泄漏

在组件销毁前取消未完成的请求：

javascript 复制代码

import axios from 'axios';

export default {
  data() {
    return {
      cancelToken: axios.CancelToken.source()
    };
  },
  methods: {
    fetchData() {
      axios.get('/data', {
        cancelToken: this.cancelToken.token
      });
    }
  },
  beforeUnmount() {
    this.cancelToken.cancel('组件卸载，取消请求');
  }
};