axios 进行封装及添加拦截器

不算专业的专业人才
215 阅读3分钟

在 Vue 中对 axios 进行封装及添加拦截器可以更方便地处理请求和响应，增强代码的可维护性和复用性。以下是一个简单的封装示例及拦截器的使用方法：

首先创建一个 axios 实例并进行相关配置，同时添加请求拦截器和响应拦截器：

import axios from 'axios';

// 创建一个 axios 实例
const instance = axios.create({
  baseURL: 'http://your-base-url',  // 设置基础 URL
  timeout: 5000,  // 设置请求超时时间
  headers: {
    'Content-Type': 'application/json',  // 设置默认请求头
  },
});

// 请求拦截器
instance.interceptors.request.use(config => {
  // 在这里可以添加请求发送前的处理逻辑，例如添加 token 等
  // const token = localStorage.getItem('token'); 
  // if (token) {
  //   config.headers.Authorization = `Bearer ${token}`; 
  // }
  return config;
}, error => {
  // 处理请求错误
  return Promise.reject(error);
});

// 响应拦截器
instance.interceptors.response.use(response => {
  // 在这里可以对响应数据进行预处理
  return response.data;
}, error => {
  // 处理响应错误
  // 例如根据不同的错误状态码进行相应的处理
  return Promise.reject(error);
});

export default instance;

在上述代码中，首先使用axios.create()创建了一个 axios 实例，并设置了基础 URL、超时时间和默认请求头等配置。

请求拦截器通过instance.interceptors.request.use()添加，其中第一个函数用于在请求发送前进行处理，可以添加一些额外的请求头信息或进行其他操作。如果请求出现错误，第二个函数会处理该错误。

响应拦截器通过instance.interceptors.response.use()添加，第一个函数用于处理响应数据，这里直接返回了响应的数据部分。如果响应出现错误，第二个函数会处理该错误。

然后，在需要发送请求的地方，直接导入并使用封装后的实例进行请求发送：

import api from './your-api-file';  // 导入封装后的 axios 实例

api.get('/your-api-endpoint')  // 使用 get 方法发送请求
.then(response => {
    // 处理请求成功的响应
  })
.catch(error => {
    // 处理请求失败的情况
  });

在实际应用中，你可以根据项目的具体需求，在请求拦截器和响应拦截器中添加更多的逻辑处理。例如，根据不同的错误状态码进行特定的提示、刷新 token、跳转到登录页面等操作。同时，还可以根据需要封装不同类型的请求方法（如 get、post、put、delete 等），以方便在各个组件中使用。

另外，关于环境切换和 baseURL 的设置，一种常见的方式是通过环境变量来动态配置 baseURL。例如，在开发环境和生产环境中使用不同的 baseURL，可以创建.env.development和.env.production文件来分别设置对应的环境变量，然后在代码中根据环境变量的值来确定 baseURL。

例如，在.env.development文件中设置：

NODE_ENV=development
VUE_APP_BASE_URL=http://development-api-url

在.env.production文件中设置：

NODE_ENV=production
VUE_APP_BASE_URL=http://production-api-url

然后在代码中通过process.env.VUE_APP_BASE_URL来获取对应的 baseURL：

const baseURL = process.env.VUE_APP_BASE_URL || 'default-base-url'; 
const instance = axios.create({
  baseURL: baseURL, 
  //...其他配置
});

这样，在不同的环境下，axios 就会使用相应环境变量指定的 baseURL 进行请求发送。记得在项目启动时，确保正确加载了对应的环境配置文件。

请注意，上述代码中的注释部分提供了一些常见的示例，你可以根据实际需求进行修改和扩展。拦截器的具体功能和处理逻辑完全取决于你的项目需求，例如处理身份验证、错误处理、数据格式化等。同时，确保将'your-base-url'替换为实际的接口基础 URL，并根据需要修改请求的端点（'/your-api-endpoint'）和请求方法（get、post等）。

此外，如果你使用的是 Vue 3，封装和使用方式类似，但可能需要根据 Vue 3 的项目结构和配置进行适当调整。上述示例中的代码在 Vue 2 和 Vue 3 中都可以使用，只需确保正确安装和引入了 axios 库

avatar
文章
阅读
粉丝