如何使用axios设置超时而不取消API调用？

Question

背景知识，我有一个 API 调用，它的响应可能相当长（在某些情况下大约一分钟多，但大多数情况下 10-15 秒）。我想做的是在客户端设置超时，同时后端继续处理调用。我正在使用 axios 来处理 http 请求，我知道有一个timeout默认的键0意味着没有超时，因此调用将继续，直到成功或失败。我尝试将其设置为1查看如何处理一毫秒超时并且呼叫被取消......这是有道理的。我现在的问题是，如何在客户端实现超时而不取消HTTP请求？一些代码可以帮助您理解我所尝试的内容。

import React from "react";
import axios from "axios"

function App() {
  const fetchLongRequest = async () => {
    try{

// All peachy over here if no timeout is implemented...

      const myRequest = await axios({
        url: "https://jsonplaceholder.typicode.com/todos/1",
        headers: {
          accept: "application/json",
          "Content-Type": "application/json"
        },
      })
      console.log("SUCCESS!", JSON.stringify(myRequest.data, null, 2))
    }catch(error){
      console.log("FAIL!", error.message)
    }
  }

  return (
   <button onClick={() => fetchLongRequest()}>Fetch</button>
  );
}

export default App;

现在这是我对超时的介绍

import React from "react";
import axios from "axios";

function App() {
  const fetchLongRequest = async () => {

// timeout works as expected but I'd like to let the call go to the backend and do its thing. 

    try {
      const myRequest = await axios({
        url: "https://jsonplaceholder.typicode.com/todos/1",
        headers: {
          accept: "application/json",
          "Content-Type": "application/json",
        },
        timeout: 1,
      });
      console.log("SUCCESS!", JSON.stringify(myRequest.data, null, 2));
    } catch (error) {
      console.log("FAIL!", error.message);
    }
  };

  return <button onClick={() => fetchLongRequest()}>Fetch</button>;
}

export default App;

我知道这个请求有点奇怪，因为它提出了许多问题，例如错误处理、如何知道此调用何时完成等。我想获得一些关于如何完成此任务的反馈...请:)

Answer 1

您所需要的只是在请求之前设置超时

import React from "react";
import axios from "axios";

function App() {
    const fetchLongRequest = async () => {
        
        const waitTime = 5000;
        setTimeout(() => console.log("Request taking a long time"), waitTime);
        try {
            const result = await axios({
                url: "https://jsonplaceholder.typicode.com/todos/1",
                headers: {
                    accept: "application/json",
                    "Content-Type": "application/json",
                }
            });
            console.log("SUCCESS!", JSON.stringify(result.data, null, 2));
        } catch(error) {
            console.log("FAIL!", error.message);
        }
    };
    return <button onClick = {() => fetchLongRequest()}>Fetch </button> ;
}
export default App;

下面的原始解决方案完全是多余的！

我认为这会做你想要的，使用 Promise.race

注意：就错误处理而言，这仍然不太正确

该handleError函数纯粹是这样，如果请求在超时之前失败，则失败不会输出两次

import React from "react";
import axios from "axios";

function App() {
    const fetchLongRequest = async () => {
        
        const waitTime = 5000;
        const handleError = error => {
            // this makes sure that the FAIL output isn't repeated in the case when there's a failure before the timeout
            if (!error.handled) {
                if (error.timedout) {
                    console.log("TIMEDOUT", error.timedout);
                } else {
                    console.log("FAIL!", error.message);
                    error.handled = true;
                    throw error;
                }
            }
        };
        const makeRequest = async () => {
            try {
                const result = await axios({
                    url: "https://jsonplaceholder.typicode.com/todos/1",
                    headers: {
                        accept: "application/json",
                        "Content-Type": "application/json",
                    }
                });
                console.log("SUCCESS!", JSON.stringify(result.data, null, 2));
            } catch(error) {
                return handleError(error);
            }
        };
        const timer = new Promise((_, reject) => setTimeout(reject, waitTime, {timedout: "request taking a long time"}));
        try {
            await Promise.race([makeRequest(), timer]);
        } catch(error) {
            handleError(error);
        }
    };
    return <button onClick = {() => fetchLongRequest()}>Fetch </button> ;
}
export default App;

顺便说一句，这段代码在没有async/的情况下要干净得多await- 不过，公平地说，我使用async/并不await像单独使用 Promises 那样流畅 - 自从有.catch:p之前我就已经使用了 Promises

非async/await执行

import React from "react";
import axios from "axios";

function App() {
    const fetchLongRequest = () => {
        
        const waitTime = 5000;
        const handleError = error => {
            // this makes sure that the FAIL output isn't repeated in the case when there's a failure before the timeout
            if (!error.handled) {
                if (error.timedout) {
                    console.log("TIMEDOUT", error.timedout);
                } else {
                    console.log("FAIL!", error.message);
                    error.handled = true;
                    throw error;
                }
            }
        };
        
        const myRequest = axios({
            url: "https://jsonplaceholder.typicode.com/todos/1",
            headers: {
                accept: "application/json",
                "Content-Type": "application/json",
            }
        }).then(result => {
            console.log("SUCCESS!", JSON.stringify(result.data, null, 2));
        }).catch(handleError);
        
        const timer = new Promise((_, reject) => setTimeout(reject, waitTime, {timedout: "request taking a long time"}));
        
        return Promise.race([myRequest, timer]).catch(handleError);
    };
    return <button onClick = {() => fetchLongRequest()}>Fetch </button> ;
}
export default App;

当然“更干净”只是我的看法