Axios是否支持与原生fetch()一致的keepalive功能？

Axios官方没有直接暴露keepalive的公开配置项，但可以通过自定义底层请求逻辑的方式实现该能力，效果和原生fetch的keepalive参数完全一致，常见实现方案有两种：

• 方案1：基于原生XMLHttpRequest的keepalive属性配置
  Axios在浏览器环境底层默认使用XMLHttpRequest发送请求，而XMLHttpRequest本身也支持keepalive属性，你可以通过请求拦截器自定义适配逻辑开启该能力：

// 新增请求拦截器注入keepalive逻辑
axios.interceptors.request.use(config => {
  // 仅针对标记了keepalive的请求做处理
  if (config.keepalive) {
    const originalAdapter = config.adapter || axios.defaults.adapter;
    config.adapter = async (config) => {
      const xhr = new XMLHttpRequest();
      xhr.open(config.method.toUpperCase(), config.url, true);
      // 开启keepalive，页面关闭后请求仍会继续执行
      xhr.keepalive = true;
      // 剩余请求头、响应处理逻辑复用Axios默认逻辑即可
      return originalAdapter(config);
    };
  }
  return config;
})

// 发送请求时传入自定义配置即可开启
axios.post('/your/request/path', requestData, { keepalive: true })

• 方案2：替换Axios底层为fetch适配器
  你可以使用社区的fetch适配库将Axios的底层请求实现替换为原生fetch，之后就可以直接在请求配置中传入keepalive参数：

import axios from 'axios';
import fetchAdapter from '@haverstack/axios-fetch-adapter';

// 创建指定fetch适配器的Axios实例
const axiosInstance = axios.create({
  adapter: fetchAdapter
});

// 发送请求时直接传入keepalive配置
axiosInstance.post('/your/request/path', requestData, { keepalive: true })

keepalive
keepalive选项可用于允许请求的生命周期长于页面本身，携带keepalive标识的fetch请求是Navigator.sendBeacon() API的替代方案。

内容的提问来源于stack exchange，提问作者Arkadiy Andriyenko