Nuxt.js 与 Axios

在现代的 Web 开发中，后端 API 的调用是一个常见的需求。Nuxt.js 是一个基于 Vue.js 的服务器渲染框架，它可以帮助开发者快速构建服务端渲染的应用程序。而 Axios 则是一个基于 Promise 的 HTTP 库，可以用于浏览器和 node.js 中。在本章节中，我们将探讨如何在 Nuxt.js 应用中使用 Axios 来发起 HTTP 请求。

安装 Axios

首先，我们需要在项目中安装 Axios。可以通过 npm 或 yarn 来安装：

npm install axios

或

yarn add axios

在 Nuxt.js 中配置 Axios

Nuxt.js 提供了对 Axios 的内置支持，可以通过 @nuxtjs/axios 模块来使用。为了在项目中启用 Axios，你需要在 nuxt.config.js 文件中添加 @nuxtjs/axios 模块。

// www.javascriptcn.com code example
export default {
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    // 自定义配置
    baseURL: 'https://api.example.com',
  },
}

在这里，我们配置了 Axios 的 baseURL，这意味着所有通过 Axios 发起的请求都将从这个基础 URL 开始。

使用 Axios 发起请求

在 Nuxt.js 中，你可以通过 this.$axios 来访问 Axios 实例，并使用它来发起 HTTP 请求。例如，我们可以创建一个 Vue 组件来演示如何获取数据：

// www.javascriptcn.com code example
<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const users = await $axios.$get('/users')
    return { users }
  }
}
</script>

在这个例子中，我们使用了 asyncData 生命周期钩子来发起请求并获取数据。$axios 是通过上下文对象传递进来的，我们使用它来发送 GET 请求到 /users 端点，并将响应的数据返回给组件。

处理错误

在发起网络请求时，错误处理是非常重要的。你可以通过捕获异常来处理错误：

// www.javascriptcn.com code example
export default {
  async asyncData({ $axios }) {
    try {
      const users = await $axios.$get('/users')
      return { users }
    } catch (error) {
      console.error('获取用户数据失败:', error)
      return { users: [] }
    }
  }
}

在这个例子中，我们使用了 try...catch 结构来捕获可能发生的错误，并在控制台输出错误信息。

配置 Axios 请求拦截器

有时候，我们可能需要在请求发出之前或响应接收之后做一些额外的操作，比如添加认证令牌或者处理全局的响应错误。这可以通过配置 Axios 的拦截器来实现。

// www.javascriptcn.com code example
export default {
  buildModules: [
    '@nuxtjs/axios',
  ],
  axios: {
    baseURL: 'https://api.example.com',
    headers: {
      common: {
        'Authorization': 'Bearer ' + process.env.AUTH_TOKEN,
      },
    },
    // 添加请求拦截器
    requestInterceptor: config => {
      console.log('请求拦截器被触发')
      return config
    },
    // 添加响应拦截器
    responseInterceptor: response => {
      console.log('响应拦截器被触发')
      return response
    },
  },
}

在这个例子中，我们为 Axios 添加了请求和响应拦截器。这些拦截器可以在请求发送之前和响应接收之后执行一些自定义逻辑。

小结

本章介绍了如何在 Nuxt.js 应用中使用 Axios 来发起 HTTP 请求。我们从安装 Axios 开始，然后讨论了如何在 Nuxt.js 中配置 Axios，并展示了如何使用 Axios 发起请求以及如何处理错误。最后，我们探讨了如何配置 Axios 请求和响应拦截器以执行一些额外的逻辑。希望这些内容能帮助你在实际开发中更有效地使用 Axios。