axios和loading的完美结合：用代码实现高效加载体验

2023-10-04 02:46:10

优雅地管理前端加载状态：Axios与vue-loading联袂出击

简介

作为前端开发人员，优雅地处理加载状态是一个常见的难题。传统的jQuery ajax方法虽然可用，但其繁琐性和维护难度着实令人头疼。好在如今有了axios的强势崛起，为我们带来了更胜一筹的解决方案。本文将深入探究如何结合axios和vue-loading，打造高效的加载体验。

安装与配置axios

第一步是安装axios：

npm install axios

安装完成后，引入axios：

import axios from 'axios';

接下来，配置axios：

axios.defaults.baseURL = 'http://example.com';
axios.defaults.timeout = 10000;

发送请求

发送GET请求：

axios.get('/users').then(response => {
  console.log(response.data);
});

发送POST请求：

axios.post('/users', {
  name: 'John Doe',
  email: 'johndoe@example.com'
}).then(response => {
  console.log(response.data);
});

处理加载状态

使用vue-loading显示加载状态：

this.$loading.show();

请求完成后隐藏加载状态：

this.$loading.hide();

取消请求

取消请求：

axios.cancelToken.source().cancel();

示例代码

下面是一个完整示例，展示了如何使用axios和vue-loading管理加载状态：

import axios from 'axios';
import { Loading } from 'vue-loading-overlay';

export default {
  components: { Loading },
  data() {
    return {
      isLoading: false,
      users: [],
    };
  },
  methods: {
    async fetchUsers() {
      this.isLoading = true;
      try {
        const response = await axios.get('/users');
        this.users = response.data;
      } catch (error) {
        console.error(error);
      } finally {
        this.isLoading = false;
      }
    },
  },
};