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('组件卸载,取消请求');
  }
};
相关推荐
幽络源小助理9 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
鱼樱前端11 小时前
今天介绍下最新更新的Vite7
前端·vue.js
炒毛豆13 小时前
vue3.4中的v-model的用法~
前端·vue.js
阳火锅14 小时前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
夕水15 小时前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了15 小时前
实现一个简单的Vue响应式
前端·vue.js
aklry16 小时前
uniapp三步完成一维码的生成
前端·vue.js
用户261245834016117 小时前
vue学习路线(11.watch对比computed)
前端·vue.js
阑梦清川18 小时前
Java后端项目前端基础Vue(二)
vue.js
雪碧聊技术19 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model