Vue 从入门到精通：实战篇之请求发送与错误处理

2024-01-19 15:01:22

在实际的 Vue.js 项目中，我们经常需要与后端进行交互，发送请求以获取或更新数据。在 Vue.js 中，我们可以使用 axios 库来发送请求。axios 是一个流行的 JavaScript 库，用于在浏览器中发送 HTTP 请求。它简单易用，并且支持多种特性，如自动将 JSON 数据转换为 JavaScript 对象。

要使用 axios 发送请求，我们需要先安装它。我们可以使用 npm 来安装 axios：

npm install axios

安装完成后，我们就可以在 Vue.js 项目中使用 axios 了。我们可以在 Vue.js 组件中使用 axios 发送请求，也可以在 Vue.js 实例中使用 axios 发送请求。

// 在 Vue.js 组件中使用 axios
export default {
  data() {
    return {
      loading: false,
      error: null,
      data: null
    }
  },
  methods: {
    async fetchUserData() {
      this.loading = true
      try {
        const response = await axios.get('https://api.example.com/users/1')
        this.data = response.data
      } catch (error) {
        this.error = error
      } finally {
        this.loading = false
      }
    }
  }
}

// 在 Vue.js 实例中使用 axios
const app = new Vue({
  data() {
    return {
      loading: false,
      error: null,
      data: null
    }
  },
  methods: {
    async fetchUserData() {
      this.loading = true
      try {
        const response = await axios.get('https://api.example.com/users/1')
        this.data = response.data
      } catch (error) {
        this.error = error
      } finally {
        this.loading = false
      }
    }
  }
})

在上面的代码中，我们使用 axios 发送了一个 GET 请求到 https://api.example.com/users/1。如果请求成功，我们将把服务器返回的数据存储在 data 属性中。如果请求失败，我们将把错误信息存储在 error 属性中。最后，我们将把 loading 属性设置为 false，表示请求已经结束。

在 Vue.js 中，我们还可以使用 async 和 await 来处理异步操作。async 和 await 是 ES8 中引入的两个，它们允许我们以同步的方式编写异步代码。使用 async 和 await，我们可以让代码看起来更加清晰易懂。

在上面的代码中，我们使用 async 和 await 来处理 fetchUserData 方法中的异步操作。我们先使用 await 关键字等待 axios.get 请求完成，然后我们将服务器返回的数据存储在 data 属性中。如果请求失败，我们将把错误信息存储在 error 属性中。最后，我们将把 loading 属性设置为 false，表示请求已经结束。

在 Vue.js 中，我们可以使用控制台来查看后端返回的错误。当我们发送请求时，如果服务器返回了一个错误，我们可以使用控制台来查看错误信息。

在 Chrome 浏览器中，我们可以使用以下步骤来查看控制台：