Vue项目中axios封装，优雅拦截重复请求

2023-12-28 21:30:50

Vue项目中axios封装，结合ElementUI，优雅拦截重复请求

引言：

在现代前端开发中，Vue.js框架无疑占据着举足轻重的地位。而随着应用规模的不断扩大，与后端API交互的需求也日益繁多。此时，axios库便应运而生，它提供了一套简洁易用的HTTP请求解决方案，深受开发者的青睐。为了进一步提升开发体验，本文将深入探讨如何在Vue项目中优雅地封装axios，并结合ElementUI组件库实现对重复请求的拦截操作，为开发者提供更加高效便捷的开发利器。

axios封装

axios封装的目的是将常用的HTTP请求操作进行抽象，从而简化开发流程。具体来说，我们可以创建一个名为api.js的模块，用于封装axios实例：

import axios from 'axios'

// 创建axios实例
const instance = axios.create({
  baseURL: 'YOUR_API_BASE_URL',
  timeout: 10000,
})

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

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

export default instance

封装要点：

baseURL： 设置API的根URL，便于后续请求的统一配置。
timeout： 设置请求超时时间，防止请求长时间等待。
请求拦截器： 在发送请求之前进行一些操作，如添加请求头、显示加载提示等。
响应拦截器： 在收到响应后进行一些操作，如处理返回数据、隐藏加载提示等。

ElementUI提示集成

ElementUI是一款功能强大的Vue组件库，提供了丰富的UI组件，能够显著提升前端开发效率。为了在axios封装中优雅地实现对重复请求的拦截，我们可以借助ElementUI的Loading组件。

在api.js模块中，我们可以定义一个名为showLoading的函数：

import { Loading } from 'element-ui'

export function showLoading(target) {
  return Loading.service({
    lock: true,
    text: 'Loading...',
    target: target,
  })
}

函数功能：

showLoading(target)： 创建一个加载提示，并将其添加到指定的目标元素。

重复请求拦截

为了拦截重复请求，我们可以利用axios的CancelToken机制。在封装的api.js模块中，我们可以定义一个名为requestMap的Map对象，用于存储正在进行的请求。

const requestMap = new Map()

export function createRequestInterceptor() {
  return (config) => {
    // 获取请求的唯一标识
    const requestKey = getRequestKey(config)

    // 如果请求正在进行，则取消该请求
    if (requestMap.has(requestKey)) {
      requestMap.get(requestKey).cancel('Request is already in progress')
    }

    // 创建新的CancelToken并将其添加到请求映射中
    const source = axios.CancelToken.source()
    requestMap.set(requestKey, source)

    // 在请求完成后或被取消时，从映射中移除该请求
    config.cancelToken = source.token
    config.onFinally(() => {
      requestMap.delete(requestKey)
    })

    return config
  }
}

拦截器功能：

createRequestInterceptor()： 创建一个请求拦截器函数。
getRequestKey(config)： 根据请求配置生成一个唯一的标识。
如果请求正在进行，则取消该请求： 检查请求映射中是否存在当前请求的标识，如果存在则取消该请求。
创建新的CancelToken并将其添加到请求映射中： 创建一个新的取消令牌，并将其添加到请求映射中。
在请求完成后或被取消时，从映射中移除该请求： 当请求完成后或被取消时，从请求映射中移除该请求。

使用封装后的axios

在Vue组件中，我们可以直接使用封装后的axios实例进行API请求：

import { api } from '@/api.js'

export default {
  methods: {
    async getPosts() {
      const { data } = await api.get('/posts')
      console.log(data)
    },
  },
}