Vue:Ajax

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值