二次封装axios的请求拦截

最新推荐文章于 2025-07-01 09:20:21 发布

原创最新推荐文章于 2025-07-01 09:20:21 发布 · 625 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 同时被 3 个专栏收录

9 篇文章

订阅专栏

vue

4 篇文章

订阅专栏

ES6

2 篇文章

订阅专栏

本文介绍如何在Vue项目中通过封装Axios实现请求取消功能。主要通过创建取消请求的令牌并将其应用于get和post请求中，确保当有新的请求到来时可以取消前一个未完成的请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于vue组件，封装axios请求拦截

新建一个自己的公共的js文件如：commTools.js

import axios from 'axios'
export const mixin =  {
  data(){
    return {
      source: '',// 请求对象-用于停止请求
    }
  },
  methods: {
    /**
    * get 请求
    * @param url 请求地址
    * @param params 请求的参数
    * @returns {Promise<any>}
    */
    httpGet(url, params) {
      // 停止之前的请求
      if(this.source) this.source.cancel()
      // 重新初始化source对象
      this.source = axios.CancelToken.source();
      return new Promise((resolve, reject) => {
        axios.get(url, {
          params: params,
          cancelToken: this.source.token
        }).then(res => {
          resolve(res.data) // 返回请求成功的数据 data
        }).catch(err => {
          reject(err)
        })
      })
    },
    /**
     * post 请求
     * @param url 请求地址
     * @param params 请求的参数
     * @returns {Promise<any>}
     */
    httpPost(url, params){
      // 停止之前的请求
      if(this.source) this.source.cancel()
      // 重新初始化source对象
      this.source = axios.CancelToken.source();
      return new Promise((resolve, reject) => {
        axios.post(url,
          params,
          {
            cancelToken: this.source.token
          })
          .then(res => {
            resolve(res.data) // 返回请求成功的数据 data
          }).catch(err => {
            reject(err)
          })
        })
      }
    }
}

在组件中使用

// 引入刚刚的js文件中的 mixin 对象
import { mixin } from "./../../assets/js/commTools"
// 在组件中使用混入
mixins: [mixin]

接下来就是在 methdos 中正常使用该方法就行了

let url = '请求地址'
let params = {
  name: 'xxx',
}
this.httpPost(url, params).then(res => {
  console.log('得到的结果：'+ res)
})