semlinker/axios-retry-adapter.html

## axios-retry-adapter.html
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Axios 请求重试示例（适配器）</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  </head>
  <body>
    <h3>Axios 请求重试示例（适配器）</h3>
    <button onclick="requestWithoutRetry()">请求失败不重试</button>
    <button onclick="requestWithRetry()">请求失败重试</button>
    <script>
      function retryAdapterEnhancer(adapter, options) {
        const { times = 0, delay = 300 } = options;

        return async (config) => {
          const { retryTimes = times, retryDelay = delay } = config;
          let __retryCount = 0;
          const request = async () => {
            try {
              return await adapter(config);
            } catch (err) {
              if (!retryTimes || __retryCount >= retryTimes) {
                return Promise.reject(err);
              }
              __retryCount++;
              // 延时处理
              const delay = new Promise((resolve) => {
                setTimeout(() => {
                  resolve();
                }, retryDelay);
              });
              // 重新发起请求
              return delay.then(() => {
                return request();
              });
            }
          };
          return request();
        };
      }

      const http = axios.create({
        baseURL: "http://localhost:3000/",
        adapter: retryAdapterEnhancer(axios.defaults.adapter, {
          retryDelay: 1000,
        }),
      });

      function requestWithoutRetry() {
        http.get("/users");
      }

      function requestWithRetry() {
        http.get("/users", { retryTimes: 2 });
      }
    </script>
  </body>
</html>

## axios-retry-interceptor.html
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Axios 请求重试示例（拦截器）</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  </head>
  <body>
    <h3>Axios 请求重试示例（拦截器）</h3>
    <button onclick="requestWithoutRetry()">请求失败不重试</button>
    <button onclick="requestWithRetry()">请求失败重试</button>
    <script>
      axios.interceptors.response.use(null, (err) => {
        let config = err.config;
        if (!config || !config.retryTimes) return Promise.reject(err);
        const { __retryCount = 0, retryDelay = 300, retryTimes } = config;
        // 在请求对象上设置重试次数
        config.__retryCount = __retryCount;
        // 判断是否超过了重试次数
        if (__retryCount >= retryTimes) {
          return Promise.reject(err);
        }
        // 增加重试次数
        config.__retryCount++;
        // 延时处理
        const delay = new Promise((resolve) => {
          setTimeout(() => {
            resolve();
          }, retryDelay);
        });
        // 重新发起请求
        return delay.then(function () {
          return axios(config);
        });
      });

      function requestWithoutRetry() {
        axios.get("http://localhost:3000/users");
      }

      function requestWithRetry() {
        axios.get("http://localhost:3000/users", { retryTimes: 1 });
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="zh-cn">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Axios 请求重试示例（适配器）</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
	</head>
	<body>
	<h3>Axios 请求重试示例（适配器）</h3>
	<button onclick="requestWithoutRetry()">请求失败不重试</button>
	<button onclick="requestWithRetry()">请求失败重试</button>
	<script>
	function retryAdapterEnhancer(adapter, options) {
	const { times = 0, delay = 300 } = options;

	return async (config) => {
	const { retryTimes = times, retryDelay = delay } = config;
	let __retryCount = 0;
	const request = async () => {
	try {
	return await adapter(config);
	} catch (err) {
	if (!retryTimes \|\| __retryCount >= retryTimes) {
	return Promise.reject(err);
	}
	__retryCount++;
	// 延时处理
	const delay = new Promise((resolve) => {
	setTimeout(() => {
	resolve();
	}, retryDelay);
	});
	// 重新发起请求
	return delay.then(() => {
	return request();
	});
	}
	};
	return request();
	};
	}

	const http = axios.create({
	baseURL: "http://localhost:3000/",
	adapter: retryAdapterEnhancer(axios.defaults.adapter, {
	retryDelay: 1000,
	}),
	});

	function requestWithoutRetry() {
	http.get("/users");
	}

	function requestWithRetry() {
	http.get("/users", { retryTimes: 2 });
	}
	</script>
	</body>
	</html>