axios报then(...).catch(...).finally is not a function异常

这个异常通常表示您的代码正在使用不支持 `finally` 方法的旧版本的 `Promise`。 `finally` 方法是在ES2018中引入的。

要解决这个问题，您需要将您的 `Promise` 版本升级到支持 `finally` 方法的版本。您可以使用 `Promise.prototype.finally` polyfill来实现这一点。

您可以将以下代码添加到您的项目中：

if (!Promise.prototype.finally) {
  Promise.prototype.finally = function (callback) {
    return this.then(
      function (value) {
        return Promise.resolve(callback()).then(function () {
          return value;
        });
      },
      function (reason) {
        return Promise.resolve(callback()).then(function () {
          throw reason;
        });
      }
    );
  };
}

这将在旧版本的Promise上添加一个 `finally` 方法的实现。

相关问题

react中使用axios在app.tsx设置全局loading

在React应用中，如果你想在App组件之外的地方设置全局的Axios请求loading状态，通常会创建一个专门的模块或者工具函数来管理这样的共享状态。以下是一个简单的步骤：

1. 首先，在你的项目里创建一个文件，比如`hooks.js` 或者 `utils.js`，用于存放自定义Hook或者工具函数。

// hooks.js 或 utils.js
import axios from 'axios';

const useLoading = (initialState = false) => {
  const [isLoading, setIsLoading] = React.useState(initialState);

  // 创建一个异步函数来显示或隐藏加载状态
  const setLoading = async () => {
    setIsLoading(true);
    try {
      await axios.request(/* your request here */);
    } catch (error) {
      console.error('Error fetching data:', error);
    } finally {
      setIsLoading(false);
    }
  };

  return { isLoading, setLoading };
};

export default useLoading;

2. 然后在`App.tsx`或者其他需要使用这个loading状态的地方导入并使用它：

import React from 'react';
import { useEffect } from 'react';
import useLoading from './hooks.js'; // 导入useLoading Hook

function App() {
  const { isLoading, setLoading } = useLoading();

  // 当有 Axios 请求时，更新 loading 状态
  useEffect(() => {
    setLoading(); // 开始请求前设置为 true
    // 在你的axios请求这里，例如 fetchData()
    // fetchData().then(setLoading(false)); // 请求完成后设置为 false
    return () => {}; // 清除副作用，当组件卸载时关闭 loading
  }, [setLoading]);

  // ...其他App组件内容...
}

export default App;

在这个例子中，每当有 Axios 请求时，`setLoading` 函数会被调用，显示全局的 loading 动画。请求结束后，`isLoading` 的值会被设回为 `false`，表示请求完成。

function submitForm() { const phone = phoneNumberInput.value; if (!phone) { alert('请输入手机号码'); return; } submitBtn.disabled = true; axios.post(API_URL, { phone }) .then(() => { alert('提交成功'); }) .catch(() => { alert('提交失败'); }) .finally(() => { submitBtn.disabled = false; }); }。优化这个代码，使得代码的alert输出能够在移动端显示

可以使用移动端友好的提示框库，比如 SweetAlert2。安装 SweetAlert2 后，可以按照下面的方式来优化代码：

首先，在 HTML 文件中引入 SweetAlert2 的样式和脚本：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.17/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.17/dist/sweetalert2.all.min.js"></script>

然后，在 JavaScript 文件中使用 SweetAlert2 的提示框：

function submitForm() {
  const phone = phoneNumberInput.value;
  if (!phone) {
    Swal.fire('请输入手机号码');
    return;
  }
  submitBtn.disabled = true;
  axios.post(API_URL, { phone })
    .then(() => {
      Swal.fire('提交成功');
    })
    .catch(() => {
      Swal.fire('提交失败');
    })
    .finally(() => {
      submitBtn.disabled = false;
    });
}

这样就可以在移动端使用更友好的提示框了。