Vue.js 如何在Nuxt中全局使用axios/axios拦截器

在本文中，我们将介绍如何在Nuxt应用中全局使用axios，并且如何为axios添加拦截器。

什么是Nuxt.js

Nuxt.js是一个基于Vue.js的通用应用框架，它可以帮助我们快速构建基于Vue.js的应用程序。Nuxt.js提供了一些额外的功能和约定，使得我们可以更加轻松地开发Vue.js项目。

axios介绍

axios是一个基于Promise的HTTP客户端，它可以在浏览器和Node.js中使用。axios非常简单易用，可以用于发送HTTP请求，并且具有拦截器的功能，以便在发起请求和接收响应之间执行一些操作。

在Nuxt中全局使用axios

在Nuxt应用中，我们需要在应用的根目录创建一个插件，用来全局注册axios。首先，在plugins目录下创建一个新的文件axios.js，然后在该文件中添加以下代码：

import axios from 'axios';

// 创建一个axios实例
const axiosInstance = axios.create({
  // 自定义配置
});

// 将axios实例绑定到Nuxt的 $axios属性上 export default ({$ axios }, inject) => {
  // 设置axios实例为全局可用
  inject('axios', axiosInstance);
};

接下来，在nuxt.config.js中配置插件：

export default {
  // ...
  plugins: [
    '~/plugins/axios'
  ],
  // ...
}

现在，我们可以在Vue组件中通过this.$axios来使用axios，它是一个可全局访问的axios实例。

全局axios拦截器

axios允许我们添加拦截器，在请求或响应被发送之前或之后对其进行拦截和处理。下面是一个示例，展示了如何在Nuxt应用中全局添加axios拦截器：

import axios from 'axios';

const axiosInstance = axios.create({
  // 自定义配置
});

// 添加请求拦截器
axiosInstance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做一些操作
    return config;
  },
  (error) => {
    // 对请求错误做一些处理
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axiosInstance.interceptors.response.use(
  (response) => {
    // 对响应数据做一些操作
    return response;
  },
  (error) => {
    // 对响应错误做一些处理
    return Promise.reject(error);
  }
);

export default ({ $axios }, inject) => {
  inject('axios', axiosInstance);
};

在请求拦截器中，我们可以对请求进行一些预处理操作，例如添加认证信息、设置请求头等。而在响应拦截器中，我们可以对响应进行处理，例如对错误信息统一处理。