封装Axios

最新推荐文章于 2025-07-03 03:50:28 发布

**无敌小飞侠

最新推荐文章于 2025-07-03 03:50:28 发布

阅读量774

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qinwei_123/article/details/89946197

js 专栏收录该内容

21 篇文章

订阅专栏

本文将介绍如何在项目中高效地封装Axios库，包括设置默认配置、拦截器管理、错误处理和优化请求响应，提升开发效率和代码质量。

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

import axios from 'axios'
import { baseURL } from '@/config'

class HttpRequest {
  constructor(baseUrl = baseURL) {
    this.baseUrl = baseUrl
    this.queue = {}
  }
  getInsideConfig () {
    const config = {
      baseURL: this.baseUrl,
    }
    return config
  }
  distroy (url) {
    delete this.queue[url]
    if (!Object.keys(this.queue).length) {
      // Spin.hide()
    }
  }
  interceptors (instance, url) {
    instance.interceptors.request.use(config => {
      // 添加全局loading。。。
      if (!Object.keys(this.queue).length) {
        // Spin.show()
      }
      this.queue[url] = true
      return config
    }, error => {

      return Promise.reject(error)
    })
    instance.interceptors.response.use(res => {
      // this.distory(url)是什么意思？
      this.distroy(url)
      console.log('res' + JSON.stringify(res))
      const {data} = res
      return data
    }, error => {
      this.distroy(url)
      return Promise.reject(error)
    })
  }
  request(options) {
    const instance = axios.create()
    // 如果有相同属性名则，options中的属性会覆盖getInsideCongig()中的属性名
    options = Object.assign(this.getInsideConfig(), options)
    // console.log('options' + JSON.stringify(options))
    this.interceptors(instance, options.url)
    return instance(options)
  }
}
export default HttpRequest