当前位置：首页 > article >正文

Vue:Ajax

article 2025/8/14 22:19:20

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

npm install axios

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 实例

// 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：监听路由或参数变化时重新获取数据

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

2处理加载状态

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

避免内存泄漏

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

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('组件卸载，取消请求');}
};