nuxt axios 封装

Nuxt.js 是一个基于 Vue.js 的通用应用框架，它提供了许多开箱即用的功能，包括对 Axios 的内置支持。Axios 是一个流行的 HTTP 客户端，用于浏览器和 node.js 中进行 HTTP 请求。在 Nuxt.js 中封装 Axios 可以提高代码的可维护性和复用性。

基础概念

Nuxt.js: 一个用于构建服务端渲染（SSR）Vue.js 应用的框架。 Axios: 一个基于 Promise 的 HTTP 客户端，适用于浏览器和 node.js。

封装优势

统一管理: 可以在一个地方集中处理所有的 API 请求，便于维护和更新。
错误处理: 可以全局捕获和处理请求错误。
请求拦截器和响应拦截器: 可以在请求发送前和响应接收后进行一些通用的操作，如添加认证 token、处理加载状态等。
环境配置: 可以根据不同的环境（开发、测试、生产）配置不同的 API 基础 URL。

类型

模块封装: 将 Axios 实例和相关方法封装成一个模块，然后在需要的地方导入使用。
插件封装: 利用 Nuxt.js 的插件系统，创建一个 Axios 插件，在应用启动时自动注册。

应用场景

API 请求: 对外提供服务的接口调用。
数据获取: 在页面加载前或组件挂载前获取所需数据。
状态管理: 结合 Vuex 进行全局状态管理。

示例代码

以下是一个简单的 Nuxt.js 中 Axios 封装的例子：

// plugins/axios.js
import axios from 'axios';

export default function ({ $axios, redirect }) {
  // 请求拦截器
  $axios.onRequest(config => {
    console.log('Making request to ' + config.url);
    // 可以在这里添加 token 等
    config.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token');
  });

  // 响应拦截器
  $axios.onResponse(response => {
    console.log('Response:', response);
    return response;
  });

  // 错误拦截器
  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status);
    if (code === 404) {
      redirect('/404');
    }
    return Promise.reject(error);
  });
}

然后在 nuxt.config.js 中注册这个插件：

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

遇到的问题及解决方法

问题: 请求超时或失败，没有正确处理错误。

原因: 可能是没有设置合适的超时时间，或者错误处理逻辑不完善。

解决方法: 设置合理的超时时间，并在错误拦截器中添加详细的错误处理逻辑。

$axios.defaults.timeout = 5000; // 设置超时时间为5秒

$axios.onError(error => {
  if (error.response) {
    // 请求已发出，但服务器响应的状态码不在 2xx 范围内
    console.log(error.response.data);
    console.log(error.response.status);
    console.log(error.response.headers);
  } else if (error.request) {
    // 请求已发出，但没有收到响应
    console.log(error.request);
  } else {
    // 在设置请求时触发了错误
    console.log('Error', error.message);
  }
  console.log(error.config);
  return Promise.reject(error);
});

通过这样的封装，可以确保你的应用在处理 HTTP 请求时更加健壮和可靠。