在 Vue.js SPA 应用中利用 Axios 进行 API 请求

Vue.js 是现代前端开发的重要框架，通过它我们可以构建出一系列的 SPA 应用。在 Vue.js 应用中，数据的获取通常都要通过 API 请求来完成，而这时候我们需要一个强大的 HTTP 库来进行请求。Axios 是一个非常流行的库，它已经成为了 Vue.js 项目中默认的请求工具。

在本文中，我们将深入探讨在 Vue.js SPA 应用中如何利用 Axios 进行 API 请求。

Axios 库的基本使用

首先，我们需要引入 Axios 库，并在需要的地方创建一个实例。我们可以在 Vue.js的项目中通过 npm 安装 Axios 库：

npm install axios --save

Axios 的使用非常简单。我们只需要在需要的组件中引入 Axios 并创建一个实例即可，接下来调用这个实例的各种方法来完成 API 请求：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com/',
  timeout: 2000,
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/json',
  },
});

instance.get('/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在上面的代码中，我们通过调用 create 方法创建了一个实例，然后使用了 get 方法进行了一个简单的 GET 请求。

集成 Axios 到 Vue.js

Vue.js 提供了一个插件化的方式来扩展应用，因此我们可以很容易地将 Axios 集成到 Vue.js 中。我们可以创建一个 axios.js 文件，在其中创建一个实例并导出：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com/',
  timeout: 2000,
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/json',
  },
});

export default instance;

这样，我们就可以在需要的组件中导入并使用我们创建的实例:

import axios from './axios.js';

export default {
  data() {
    return {
      users: [],
    };
  },
  methods: {
    fetchUsers() {
      axios.get('/users')
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
  mounted() {
    this.fetchUsers();
  },
};

在上面的代码中，我们将 Axios 实例作为一个单独的模块导入，并使用这个实例进行了一个 GET 请求。在请求成功时，我们将响应数据设置到了我们的组件中的数据属性。

封装 Axios 请求

我们可以封装 Axios 请求以便复用，并将其集成到我们的 Vue.js 组件中。我们可以创建一个 api.js 文件，在其中创建一个简单的封装函数：

import axios from './axios.js';

export function fetchUsers() {
  return axios.get('/users');
}

在封装函数中，我们导入了我们上面创建的 Axios 实例，并暴露了一个 fetchUsers 函数，以便在需要的地方调用它来完成 API 请求。

使用封装函数的方式进行 API 请求的示例代码如下：

import { fetchUsers } from './api.js';

export default {
  data() {
    return {
      users: [],
    };
  },
  methods: {
    fetchData() {
      fetchUsers()
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
  mounted() {
    this.fetchData();
  },
};

在上面的代码中，我们使用 fetchUsers 封装函数来完成了 API 请求，并将响应数据设置到了我们的组件内部的数据属性。

在 Vue.js 中处理请求错误

在进行 API 请求时，我们还需要考虑如何处理请求错误。axios 库允许我们通过 catch 方法来捕获错误并进行处理。在 Vue.js 组件中，我们可以使用 try ... catch 语句来捕获错误。

以下是一个处理请求错误的示例代码：

import { fetchUsers } from './api.js';

export default {
  data() {
    return {
      users: [],
      error: null,
    };
  },
  methods: {
    fetchData() {
      try {
        fetchUsers()
          .then(response => {
            this.users = response.data;
          })
          .catch(error => {
            this.error = error.message;
          });
      } catch (error) {
        this.error = error.message;
      }
    },
  },
  mounted() {
    this.fetchData();
  },
};

在上面的代码中，我们将捕获到的错误信息设置到我们的组件内部的数据属性中，方便错误信息的展示。

在 Axios 中添加拦截器

Axios 允许我们添加请求和响应拦截器。这些拦截器允许我们在请求到达服务器之前或响应返回到客户端之后进行一些处理。我们可以在请求时添加一些请求头，监控请求状态，对响应数据进行一些预处理等。

下面的代码展示了在 Axios 中添加请求拦截器并设置 JWT 请求头的过程：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com/',
  timeout: 2000,
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/json',
  },
});

instance.interceptors.request.use(
  config => {
    const token = localStorage.getItem('jsontoken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  },
);

在上面的代码中，我们通过 instance.interceptors.request.use() 方法向请求中添加了一个拦截器，用于添加 JWT 请求头。

总结

本文深入探讨了在 Vue.js SPA 应用中如何使用 Axios 进行 API 请求。我们学习了 Axios 库的基本使用和集成，如何封装 Axios 请求以便复用，并讨论了如何在 Vue.js 中处理请求错误和在 Axios 中添加拦截器。正确使用 Axios 库可以帮助我们构建出更加高效、可维护的 Vue.js 应用程序。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b6085cadd4f0e0ffebdff4