面试题：Vue中如何使用async/await处理网络请求的异步操作并捕获错误

Question

在Vue项目中，假设你使用axios进行网络请求。请描述如何运用async/await语法来处理异步请求，并且当请求出现错误时，怎样进行捕获和处理？请给出具体的代码示例。

Answer 1

在Vue项目中使用async/await处理axios异步请求及错误捕获可以如下实现：

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div v-if="data">
      <pre>{{ data }}</pre>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: null
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('your-api-url');
        this.data = response.data;
      } catch (error) {
        console.error('请求出错:', error);
        // 可以在这里进行错误提示等操作，例如使用Vue的消息提示插件
      }
    }
  }
};
</script>

在上述代码中：

1. 定义了一个fetchData方法，使用async关键字标记，表明这是一个异步函数。
2. 在try块中，使用await等待axios.get请求完成，await会暂停当前异步函数的执行，直到Promise被解决（resolved）或被拒绝（rejected）。
3. 如果请求成功，await会返回已解决的值（即响应数据），这里将响应数据赋值给组件的data属性。
4. 如果请求出错，代码会进入catch块，在这里可以捕获并处理错误，例如记录错误日志、向用户显示错误信息等。