nuxt中axios封装

在Nuxt中封装Axios可以通过创建一个插件来实现。下面是一个简单的示例：

首先，在plugins目录下创建一个名为axios.js的文件，然后在该文件中编写封装Axios的代码：

import axios from 'axios';

export default ({ app }, inject) => {
  // 创建一个新的Axios实例
  const instance = axios.create({
    baseURL: 'https://api.example.com', // 设置默认的基础URL
    headers: {
      'Content-Type': 'application/json'
    }
  });

  // 添加请求拦截器
  instance.interceptors.request.use(config => {
    // 在请求发送之前可以做一些自定义的处理，比如添加token等
    // config.headers.Authorization = `Bearer ${token}`;
    return config;
  }, error => {
    return Promise.reject(error);
  });

  // 添加响应拦截器
  instance.interceptors.response.use(response => {
    // 在响应数据之前可以做一些自定义的处理
    return response;
  }, error => {
    return Promise.reject(error);
  });

  // 将封装后的Axios实例注入到Vue实例中
  inject('axios', instance);
};

接着，在nuxt.config.js文件中引入该插件：

module.exports = {
  // ...
  plugins: [
    '~/plugins/axios'
  ],
  // ...
};

现在，你可以在组件或页面中使用this.$axios来发送请求了。例如：

export default {
  asyncData({ app }) {
    return app.$axios.get('/data')
      .then(response => {
        return response.data;
      })
      .catch(error => {
        console.error(error);
      });
  }
};

这样就完成了在Nuxt中封装Axios的过程。通过这种方式，你可以在全局范围内使用封装后的Axios实例，并且可以方便地添加拦截器、设置默认配置等。