如何在Vue+Axios的GET请求中使用async/await并实现try/catch？

没问题！我来帮你把这段Vue代码里的Axios请求改成更直观的async/await写法，同时用try/catch来处理错误，代码结构会清晰很多～

改写后的完整代码 #

import Vue from 'vue'
import axios from 'axios'

new Vue({
  el: '#app',
  data: {
    skills: [],
  },
  async mounted() { // 给mounted钩子加上async关键字
    try {
      // 用await等待请求完成，直接拿到response
      const response = await axios.get('http://localhost:8080/wp-json/api/v1/skills')
      this.skills = response.data // 小提醒：原代码直接赋值response，通常Axios的响应数据存在response.data里，按需调整即可
    } catch (err) {
      // catch块捕获请求过程中的所有错误（网络失败、接口报错等）
      console.log('请求出错啦:', err)
    }
  }
})

关键细节说明 #

• 一定要给mounted钩子加上async关键字，这样才能在函数内部使用await语法
• 用await替代原来的.then()链式调用，把异步逻辑写成同步风格，可读性和维护性更强
• try/catch会捕获请求全流程的错误，替代了原来的.catch()，错误处理逻辑更集中直观

内容的提问来源于stack exchange，提问作者wDrik