MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Vue中异步数据请求的最佳实践

2023-09-193.9k 阅读

一、理解异步数据请求在 Vue 中的重要性

在现代 Web 应用开发中，前端与后端进行数据交互是必不可少的环节。Vue 作为一款流行的前端框架，提供了强大的工具和模式来处理异步数据请求。异步数据请求之所以重要，主要体现在以下几个方面：

  1. 用户体验：如果数据请求是同步的，那么在请求过程中，页面会处于阻塞状态，用户无法进行任何操作，这极大地影响了用户体验。而异步请求可以在后台进行数据获取，页面依然保持响应，用户可以继续与页面交互。
  2. 数据动态性：Web 应用中的数据往往是动态变化的，需要从后端服务器实时获取最新数据。异步请求使得 Vue 组件能够及时更新数据，保持页面内容的时效性。
  3. 组件化架构：Vue 的组件化架构使得不同组件可能需要独立获取数据。异步数据请求允许每个组件根据自身需求灵活地发起请求，而不会相互干扰。

二、常用的异步数据请求库

  1. Axios
    • 特点：Axios 是一个基于 Promise 的 HTTP 库，它可以在浏览器和 Node.js 中使用。它具有简洁的 API，支持请求和响应拦截，并且可以很方便地处理 JSON 数据。
    • 安装：在 Vue 项目中，可以使用 npm 或 yarn 进行安装。 
      npm install axios
# 或者
yarn add axios
    • 基本使用示例： 
      <template>
  <div>
    <ul>
      <li v - for="user in users" :key="user.id">{{user.name}}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    };
  },
  mounted() {
    axios.get('https://jsonplaceholder.typicode.com/users')
   .then(response => {
      this.users = response.data;
    })
   .catch(error => {
      console.error('Error fetching users:', error);
    });
  }
};
</script>
  2. Fetch API
    • 特点：Fetch API 是现代浏览器原生提供的用于进行网络请求的接口，它基于 Promise，提供了更加简洁的语法。它的设计初衷是取代 XMLHttpRequest。
    • 基本使用示例： 
      <template>
  <div>
    <ul>
      <li v - for="post in posts" :key="post.id">{{post.title}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: []
    };
  },
  mounted() {
    fetch('https://jsonplaceholder.typicode.com/posts')
   .then(response => response.json())
   .then(data => {
      this.posts = data;
    })
   .catch(error => {
      console.error('Error fetching posts:', error);
    });
  }
};
</script>
    • 注意事项：Fetch API 本身不会对 HTTP 错误状态码（如 404、500 等）进行 reject，需要开发者手动处理。例如： 
      fetch('https://jsonplaceholder.typicode.com/nonexistent - endpoint')
    .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => { console.log(data); }) .catch(error => { console.error('Error:', error); });

三、在 Vue 组件中进行异步数据请求的时机

  1. mounted 钩子函数
    • 原理：mounted 钩子函数在组件挂载到 DOM 后被调用。在这个时机进行异步数据请求是很常见的做法，因为此时组件已经在页面上渲染，并且可以安全地更新 DOM 来展示请求到的数据。
    • 示例： 
      <template>
  <div>
    <h2>Products</h2>
    <ul>
      <li v - for="product in products" :key="product.id">{{product.name}}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      products: []
    };
  },
  mounted() {
    axios.get('/api/products')
   .then(response => {
      this.products = response.data;
    })
   .catch(error => {
      console.error('Error fetching products:', error);
    });
  }
};
</script>
  2. created 钩子函数
    • 原理：created 钩子函数在组件实例创建完成后被调用，此时组件的数据观测和事件机制已经初始化，但还未挂载到 DOM 上。在这个钩子函数中进行异步数据请求，可以在组件渲染前就获取数据，适用于一些不需要依赖 DOM 操作的数据预加载场景。
    • 示例： 
      <template>
  <div>
    <h2>Settings</h2>
    <p>{{settings.theme}}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      settings: {}
    };
  },
  created() {
    axios.get('/api/settings')
   .then(response => {
      this.settings = response.data;
    })
   .catch(error => {
      console.error('Error fetching settings:', error);
    });
  }
};
</script>
  3. 响应式数据变化触发
    • 原理：在某些情况下，异步数据请求需要根据组件内响应式数据的变化而触发。例如，一个搜索框，当用户输入关键词后，需要根据关键词去请求相关的数据。
    • 示例： 
      <template>
  <div>
    <input v - model="searchQuery" placeholder="Search users">
    <ul>
      <li v - for="user in searchResults" :key="user.id">{{user.name}}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      searchQuery: '',
      searchResults: []
    };
  },
  watch: {
    searchQuery: {
      immediate: true,
      handler(newValue) {
        if (newValue) {
          axios.get(`/api/users?name=${newValue}`)
         .then(response => {
            this.searchResults = response.data;
          })
         .catch(error => {
            console.error('Error searching users:', error);
          });
        } else {
          this.searchResults = [];
        }
      }
    }
  }
};
</script>

四、处理异步数据请求的 Loading 状态

  1. 在组件中添加 Loading 状态
    • 原理：为了向用户反馈数据正在加载中，我们需要在组件中添加一个布尔类型的 loading 状态。在发起异步请求时，将 loading 设置为 true，请求完成后（无论成功或失败），将 loading 设置为 false。
    • 示例： 
      <template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <div v - if="loading">Loading...</div>
    <ul v - if="!loading">
      <li v - for="item in dataList" :key="item.id">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      loading: false,
      dataList: []
    };
  },
  methods: {
    fetchData() {
      this.loading = true;
      axios.get('/api/data')
     .then(response => {
        this.dataList = response.data;
        this.loading = false;
      })
     .catch(error => {
        console.error('Error fetching data:', error);
        this.loading = false;
      });
    }
  }
};
</script>
  2. 使用自定义指令简化 Loading 状态处理
    • 原理：通过自定义指令，我们可以将 Loading 状态的处理逻辑封装起来，使其在多个组件中复用。
    • 示例： 
      // main.js
import Vue from 'vue';

Vue.directive('loading', {
  inserted(el, binding) {
    if (binding.value) {
      const loadingElement = document.createElement('div');
      loadingElement.textContent = 'Loading...';
      el.appendChild(loadingElement);
    }
  },
  update(el, binding) {
    const loadingElement = el.querySelector('div');
    if (binding.value &&!loadingElement) {
      const newLoadingElement = document.createElement('div');
      newLoadingElement.textContent = 'Loading...';
      el.appendChild(newLoadingElement);
    } else if (!binding.value && loadingElement) {
      el.removeChild(loadingElement);
    }
  }
});

      <template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <ul v - loading="loading">
      <li v - for="item in dataList" :key="item.id">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      loading: false,
      dataList: []
    };
  },
  methods: {
    fetchData() {
      this.loading = true;
      axios.get('/api/data')
     .then(response => {
        this.dataList = response.data;
        this.loading = false;
      })
     .catch(error => {
        console.error('Error fetching data:', error);
        this.loading = false;
      });
    }
  }
};
</script>

五、错误处理与重试机制

  1. 基本的错误处理
    • 原理：在异步数据请求中，可能会出现各种错误，如网络错误、服务器错误等。我们需要在请求的 catch 块中捕获这些错误，并进行适当的处理，如向用户显示错误信息。
    • 示例： 
      <template>
  <div>
    <h2>Error Handling Example</h2>
    <button @click="fetchData">Fetch Data</button>
    <div v - if="error">{{error.message}}</div>
    <ul v - if="!error">
      <li v - for="item in dataList" :key="item.id">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      error: null,
      dataList: []
    };
  },
  methods: {
    fetchData() {
      axios.get('/api/nonexistent - endpoint')
     .then(response => {
        this.dataList = response.data;
      })
     .catch(error => {
        this.error = error;
        console.error('Error fetching data:', error);
      });
    }
  }
};
</script>
  2. 重试机制
    • 原理：有时候，错误可能是由于临时的网络波动或服务器过载导致的。在这种情况下，我们可以实现一个重试机制，让请求自动重试一定次数。
    • 示例： 
      function retryAxiosRequest(url, maxRetries = 3, delay = 1000) {
  let retries = 0;
  const fetchData = () => {
    return axios.get(url)
   .catch(error => {
      if (retries < maxRetries) {
        retries++;
        console.log(`Retry ${retries} of ${maxRetries}...`);
        return new Promise(resolve => {
          setTimeout(() => {
            resolve(fetchData());
          }, delay);
        });
      } else {
        throw error;
      }
    });
  };
  return fetchData();
}

      <template>
  <div>
    <h2>Retry Mechanism Example</h2>
    <button @click="fetchData">Fetch Data</button>
    <div v - if="error">{{error.message}}</div>
    <ul v - if="!error">
      <li v - for="item in dataList" :key="item.id">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
import {retryAxiosRequest} from './retry - helper';

export default {
  data() {
    return {
      error: null,
      dataList: []
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await retryAxiosRequest('/api/data');
        this.dataList = response.data;
      } catch (error) {
        this.error = error;
        console.error('Error fetching data:', error);
      }
    }
  }
};
</script>

六、数据缓存策略

  1. 简单的本地缓存
    • 原理：在 Vue 组件中，可以使用浏览器的本地存储（localStorage）或会话存储（sessionStorage）来缓存异步请求的数据。这样，当再次请求相同的数据时，可以先从缓存中获取，减少不必要的网络请求。
    • 示例： 
      <template>
  <div>
    <h2>Data Caching Example</h2>
    <button @click="fetchData">Fetch Data</button>
    <ul>
      <li v - for="item in dataList" :key="item.id">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      dataList: []
    };
  },
  methods: {
    async fetchData() {
      const cachedData = localStorage.getItem('myData');
      if (cachedData) {
        this.dataList = JSON.parse(cachedData);
      } else {
        try {
          const response = await axios.get('/api/data');
          this.dataList = response.data;
          localStorage.setItem('myData', JSON.stringify(this.dataList));
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      }
    }
  }
};
</script>
  2. Vuex 中的缓存
    • 原理：如果使用 Vuex 管理状态，可以将异步请求的数据存储在 Vuex 的状态中，实现全局的缓存。不同组件在请求相同数据时，可以先从 Vuex 中获取。
    • 示例：
      • Vuex store.js 
        import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    cachedData: null
  },
  mutations: {
    SET_CACHED_DATA(state, data) {
      state.cachedData = data;
    }
  },
  actions: {
    async fetchData({commit}) {
      if (!this.state.cachedData) {
        try {
          const response = await axios.get('/api/data');
          commit('SET_CACHED_DATA', response.data);
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      }
    }
  }
});
      • 组件 
        <template>
  <div>
    <h2>Vuex Caching Example</h2>
    <button @click="fetchData">Fetch Data</button>
    <ul>
      <li v - for="item in cachedData" :key="item.id">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
import {mapState, mapActions} from 'vuex';

export default {
  computed: {
    ...mapState(['cachedData'])
  },
  methods: {
    ...mapActions(['fetchData'])
  }
};
</script>

七、并发与顺序异步请求

  1. 并发请求
    • 原理：在某些场景下，我们可能需要同时发起多个异步数据请求，以提高数据获取的效率。Axios 和 Fetch API 都可以通过 Promise.all 来实现并发请求。
    • 示例： 
      <template>
  <div>
    <h2>Concurrent Requests Example</h2>
    <ul>
      <li v - for="user in users" :key="user.id">{{user.name}}</li>
      <li v - for="post in posts" :key="post.id">{{post.title}}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      posts: []
    };
  },
  mounted() {
    const userPromise = axios.get('https://jsonplaceholder.typicode.com/users');
    const postPromise = axios.get('https://jsonplaceholder.typicode.com/posts');

    Promise.all([userPromise, postPromise])
   .then(([userResponse, postResponse]) => {
      this.users = userResponse.data;
      this.posts = postResponse.data;
    })
   .catch(error => {
      console.error('Error in concurrent requests:', error);
    });
  }
};
</script>
  2. 顺序请求
    • 原理：有时候，请求之间存在依赖关系，需要按照顺序依次发起。可以通过链式调用 then 方法或者使用 async/await 来实现顺序请求。
    • 示例（使用 async/await）： 
      <template>
  <div>
    <h2>Sequential Requests Example</h2>
    <ul>
      <li v - for="comment in comments" :key="comment.id">{{comment.body}}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      comments: []
    };
  },
  async mounted() {
    try {
      const postResponse = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
      const commentResponse = await axios.get(`https://jsonplaceholder.typicode.com/posts/${postResponse.data.id}/comments`);
      this.comments = commentResponse.data;
    } catch (error) {
      console.error('Error in sequential requests:', error);
    }
  }
};
</script>

八、与 Vue Router 的结合

  1. 在路由守卫中进行异步数据请求
    • 原理：Vue Router 提供了路由守卫，可以在路由切换前后执行一些逻辑。在进入某个路由时，可以利用路由守卫进行异步数据请求，确保页面渲染时数据已经准备好。
    • 示例：
      • router.js 
        import Vue from 'vue';
import Router from 'vue - router';
import axios from 'axios';
import Home from '@/components/Home.vue';
import UserDetail from '@/components/UserDetail.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/user/:id',
      name: 'UserDetail',
      component: UserDetail,
      beforeEnter: async (to, from, next) {
        try {
          const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${to.params.id}`);
          to.params.user = response.data;
          next();
        } catch (error) {
          console.error('Error fetching user data:', error);
          next('/error');
        }
      }
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/error',
      name: 'Error',
      component: () => import('@/components/Error.vue')
    }
  ]
});

export default router;
      • UserDetail.vue 
        <template>
  <div>
    <h2>{{user.name}}</h2>
    <p>{{user.email}}</p>
  </div>
</template>

<script>
export default {
  props: ['user'],
  data() {
    return {};
  }
};
</script>
  2. 处理路由切换时的重复请求
    • 原理：当用户在不同路由间频繁切换，且某些路由需要相同的异步数据请求时，可能会导致不必要的重复请求。可以通过在组件内缓存数据或者在路由守卫中判断数据是否已经存在来避免重复请求。
    • 示例（在组件内缓存数据）： 
      <template>
  <div>
    <h2>User List</h2>
    <ul>
      <li v - for="user in users" :key="user.id">{{user.name}}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      cachedUsers: []
    };
  },
  async created() {
    if (this.cachedUsers.length === 0) {
      const response = await axios.get('https://jsonplaceholder.typicode.com/users');
      this.users = response.data;
      this.cachedUsers = response.data;
    } else {
      this.users = this.cachedUsers;
    }
  }
};
</script>

通过以上对 Vue 中异步数据请求的各个方面的探讨和示例，开发者可以根据实际项目的需求，选择合适的方法和策略来优化异步数据请求，提高应用的性能和用户体验。在实际开发中，还需要不断地根据业务场景进行调整和优化，以达到最佳的实践效果。