axios 浏览器内存泄露问题解决

JadePeng

发布于 2020-11-13 11:08:16

1.3K0

发布于 2020-11-13 11:08:16

文章被收录于专栏：JadePeng的技术博客JadePeng的技术博客

现象

业务页面，频繁切换下一条，内存飙涨，导致卡顿，之前怀疑是音频播放器的锅，修改后问题依旧，于是排查网络请求。

到axios issues搜索，发现memory leaks帖子不少，典型的在这里Axios doesn't address memory leaks?:

这里提到0.19.2 版本没有问题，但是升级到0.20.0后，出现问题。

两种解决方案：

降级到0.19.2
在新版本里，不要直接使用axios，而是先创建一个instance

const axios = axios.create({...}) // instead of axios.get(), post(), put() etc.

排查业务代码，发现每次请求都是创建一个 instance，抛开版本问题，每次创建实例肯定会存在内存问题，最好还是先创建个single instance，后面复用：

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'

// 创建一个实例
const axiosInstance = axios.create() 

  save(parameters: {
    'data': ResultSaveParam,
    $queryParameters?: any,
    $domain?: string
  }): Promise<AxiosResponse<ApiResult>> {
     ....
	 // 使用axiosInstance
    return axiosInstance.request(config)
  }