Vue:axios（GET请求）

基础 GET 请求

axios.get('https://api.example.com/data')
  .then(response => {
    console.log('响应数据:', response.data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

参数传递方式

axios.get('/api/search', {
  params: {
    keyword: 'vue',
    page: 1,
    sort: 'desc'
  }
});

// 实际请求 URL 变为：
// /api/search?keyword=vue&page=1&sort=desc

高级配置选项

axios.get('/api/data', {
  timeout: 5000, // 超时时间（毫秒）
  headers: {
    'X-Custom-Header': 'value',
    'Authorization': 'Bearer ' + token
  },
  responseType: 'json', // 支持 arraybuffer/blob/document/json/text
  validateStatus: function (status) {
    return status >= 200 && status < 300; // 自定义成功状态码范围
  }
});

完整请求生命周期处理

// 显示加载状态
this.isLoading = true;

axios.get('/api/products')
  .then(response => {
    // 成功处理
    this.data = response.data;
    
    // 处理分页信息（假设后端返回如下结构）
    if(response.headers['x-total-count']) {
      this.total = parseInt(response.headers['x-total-count'], 10);
    }
  })
  .catch(error => {
    // 错误分类处理
    if (error.response) {
      // 服务器响应了非 2xx 状态码
      console.log('状态码:', error.response.status);
      console.log('响应头:', error.response.headers);
    } else if (error.request) {
      // 请求已发出但无响应
      console.error('无响应:', error.request);
    } else {
      // 请求配置错误
      console.error('配置错误:', error.message);
    }
  })
  .finally(() => {
    // 无论成功失败都执行
    this.isLoading = false;
  });

实用技巧

1. 请求取消

const source = axios.CancelToken.source();

axios.get('/api/large-data', {
  cancelToken: source.token
});

// 需要取消请求时（如组件销毁前）
source.cancel('用户主动取消请求');

// 在 Vue 组件中使用
beforeDestroy() {
  this.source?.cancel();
}

2. 缓存处理

// 简单内存缓存实现
const cache = new Map();

async function getWithCache(url) {
  if (cache.has(url)) {
    return cache.get(url);
  }
  
  const response = await axios.get(url);
  cache.set(url, response.data);
  return response.data;
}

3. 重试机制

function axiosGetWithRetry(url, retries = 3) {
  return new Promise((resolve, reject) => {
    const attempt = (remaining) => {
      axios.get(url)
        .then(resolve)
        .catch(error => {
          if (remaining > 0) {
            console.log(`剩余重试次数: ${remaining}`);
            attempt(remaining - 1);
          } else {
            reject(error);
          }
        });
    };
    attempt(retries);
  });
}

在 Vue 组件中的实践

export default {
  data() {
    return {
      posts: [],
      loading: false,
      error: null
    };
  },
  
  created() {
    this.loadPosts();
  },
  
  methods: {
    async loadPosts() {
      this.loading = true;
      this.error = null;
      
      try {
        const response = await axios.get('/api/posts', {
          params: {
            _limit: 10,
            _page: this.currentPage
          }
        });
        this.posts = response.data;
      } catch (err) {
        this.error = '加载失败: ' + err.message;
      } finally {
        this.loading = false;
      }
    }
  }
}