Vue Axios 捕获错误

简介

在 Vue 中使用 Axios 进行数据交互时，有时不可避免地会遇到出错的情况。如何正确地捕获和处理这些错误是一个很重要的问题。

本篇文章将介绍如何在 Vue 中使用 Axios 捕获错误。

使用 Axios 进行数据交互

使用 Axios 进行数据交互的第一步是引入 Axios 库。可以使用以下命令来安装 Axios：

npm install axios --save

接下来，可以在 Vue 组件中使用 Axios：

import axios from 'axios'

export default {
  data () {
    return {
      posts: []
    }
  },
  created () {
    axios.get('/api/posts')
      .then(response => {
        this.posts = response.data
      })
      .catch(error => {
        console.error(error)
      })
  }
}

在上面的代码中，使用 axios.get 方法向服务器发送 GET 请求，并在成功和失败的情况下分别调用 .then 和 .catch 方法。

捕获 Axios 错误

在上面的代码中，使用 .catch 方法来捕获错误，并将错误信息输出到控制台。但在实际开发中，我们需要更好地处理错误并向用户提供友好的错误信息。

可以将 Axios 的错误处理封装成一个函数：

export function handleError (error) {
  if (error.response) {
    console.error(`请求失败，状态码：${error.response.status}`)
  } else if (error.request) {
    console.error(`请求失败，没有响应：${error.request}`)
  } else {
    console.error(`请求失败：${error.message}`)
  }
}

在上面的代码中，判断错误的类型并输出相应的错误信息。

在组件中使用该函数：

import axios from 'axios'
import { handleError } from '@/utils'

export default {
  data () {
    return {
      posts: []
    }
  },
  created () {
    axios.get('/api/posts')
      .then(response => {
        this.posts = response.data
      })
      .catch(handleError)
  }
}

总结

在 Vue 中使用 Axios 进行数据交互时，需要注意处理错误。使用 .catch 方法捕获错误，可以将错误信息输出到控制台，但更好的方式是将错误处理封装成一个函数，并在组件中使用。