Nuxt.js 中使用 Axios：简化 API 交互的完整指南

2024-03-24 23:49:02

在 Nuxt.js 中使用 Axios 插件：全面指南

引言

Axios 是一个颇受推崇的 JavaScript 库，用于向 HTTP API 发送请求。它以其简洁性和易用性而闻名。通过将其集成到 Nuxt.js 应用程序中，您可以简化 API 交互，提升您的应用程序的效率。本文将深入探讨如何在 Nuxt.js 中添加和利用 Axios 插件，涵盖从安装到使用和常见问题解答等所有方面。

集成 Axios 插件

安装

要开始使用，您需要使用以下命令安装 Axios 和 Nuxt.js Axios 模块：

npm install axios @nuxtjs/axios

创建插件

下一步是创建 Axios 插件，该插件将配置 Axios 实例并将其提供给应用程序中的组件。在 plugins/axios.js 文件中添加以下代码：

export default function({ $axios }) {
  // 设置 baseURL，添加请求和响应拦截器。
  $axios.defaults.baseURL = 'https://localhost:5001/api';
  $axios.onRequest((config) => {
    console.log('请求发送到 ' + config.url);
  });
  $axios.onResponse((response) => {
    console.log('收到来自 ' + response.config.url + ' 的响应');
    return response;
  });
}

注册插件

在 nuxt.config.js 文件中，将 Axios 插件添加到插件数组，并注册 Nuxt.js Axios 模块：

export default {
  plugins: ['~/plugins/axios'],
  modules: ['@nuxtjs/axios'],
};

在服务中使用 Axios

Nuxt.js 服务允许您执行服务器端逻辑。通过注入 $axios 实例，您可以在服务中使用 Axios。例如，在 services/bookService.js 中：

export default {
  getBooks() {
    return $axios.get('/Home');
  },
  getBooksFiltered(payload) {
    return $axios.post('/Home/Filters', payload);
  },
};

在组件中使用 Axios

在 Nuxt.js 组件中，通过 this.$axios 访问 $axios 实例。以下是使用 Axios 获取 API 数据的示例组件：

<template>
  <ul>
    <li v-for="book in books" :key="book.id">{{ book.title }}</li>
  </ul>
</template>

<script>
import bookService from '~/services/bookService';

export default {
  data() {
    return {
      books: [],
    };
  },
  async fetch() {
    try {
      const { data } = await bookService.getBooks(this.$axios);
      this.books = data.booksList;
    } catch (error) {
      console.log(error);
    }
  },
};
</script>