从 Axios .then Vue.js 访问数据 - Javascript

在 Vue.js 中，我们经常需要进行网络请求以访问后端数据。Axios 是一个流行的库，可以用于处理 HTTP 请求。在本文中，我们将介绍如何使用 Axios 和 Vue.js 一起访问后端数据。

安装 Axios

要使用 Axios，我们需要先安装它。我们可以使用 npm 进行安装。

npm install axios

发送 GET 请求

假设我们要发送一个 GET 请求以获取某个 API 中的数据，我们可以使用以下代码：

axios
  .get('https://api.example.com/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

上述代码将向 https://api.example.com/users 发送一个 GET 请求，并在响应返回后打印响应数据。如果出现任何错误，则会在控制台中打印错误。

使用 Vue.js 访问数据

如果我们想要在 Vue.js 应用程序中使用 Axios，我们可以将 Axios 添加到 Vue.js 实例中，以便在整个应用程序中都可以访问它。在我们的 Vue.js 组件中，我们可以使用以下代码：

new Vue({
  el: '#app',
  data () {
    return {
      users: []
    }
  },
  mounted () {
    axios
      .get('https://api.example.com/users')
      .then(response => {
        this.users = response.data
      })
      .catch(error => {
        console.log(error);
      });
  }
});

上述代码将在应用程序加载后，向 https://api.example.com/users 发送一个 GET 请求，并在响应返回后将响应数据存储到我们的组件数据中。如果出现任何错误，则会在控制台中打印错误。

封装 Axios

为了避免在每个组件中重复编写相同的 Axios 代码，我们可以将 Axios 封装到单独的文件中。我们可以在该文件中定义一个函数，该函数接受一个 URL 和一个请求方法，并返回 Promise。以下是一个基本的示例：

import axios from 'axios';

export default {
  request (url, method) {
    return axios({
      method: method,
      url: 'https://api.example.com' + url
    });
  }
}

我们可以使用以下代码在 Vue.js 组件中调用此函数：

import Api from './api';

export default {
  mounted () {
    Api.request('/users', 'get')
      .then(response => {
        this.users = response.data
      })
      .catch(error => {
        console.log(error);
      });
  }
}

上述代码将向 /users 发送一个 GET 请求，并在响应返回后将响应数据存储到我们的组件数据中。如果出现任何错误，则会在控制台中打印错误。

结论

在本文中，我们学习了如何使用 Axios 和 Vue.js 一起访问后端数据。我们看到了如何发送 GET 请求，如何在 Vue.js 应用程序中使用 Axios，以及如何封装 Axios 到单独的文件中。希望这篇文章对你有所帮助！