我的解决方案有意义吗？ 处理承诺，超时，尝试/捕获

Question

I would like to find a solution where there are two promises. The first promise must complete. The second promise doesn't necessarily have to complete, but the user should not wait for a specific amount of time before a redirect occurs.

I've tried to create the solution and, since I'm new, not sure how to test this code or see if it works. Really would like to see others opinion on why this code is good or bad and would love to improve.

async function apiPromise(url) {
        try {
            const response = await fetch(url);
            const json = response.json(); 
            return {json}
        } catch (error) {
            console.error(error);
        }
}

// promise timeout wrapper race condition
function promiseTimeout(ms, promise) {
    // Create a promise that rejects in <ms> milliseconds
  let timeout = new Promise((resolve, reject) => {
    let id = setTimeout(() => {
      reject('Timed out in '+ ms + 'ms.')
    }, ms)
  })

  // Returns a race between our timeout and the passed in promise
  return Promise.race([
    promise,
    timeout
  ]).then(result => {
      clearTimeout(id);
      return result
  })
}

// let's assume this runs, componentDidMount
function setup() {
    let promises = [apiPromise('url'), timeoutPromise(5000, apiPromise('url'))]
    Promise.all(promises)
        .then(results => {
            // do whatever with the results array
        })
        .catch(error=> {
            console.error(error);
            window.location.href= '/redirect'
        })
}

the apiPromise function is used to try and fetch a URL. It resolves if successful but then a catch statement rejects it with a new Error object

the promiseTimeout function is use to create a race condition against a given promise and the timeout

the setup function is just like a react componentDidMount or just to initiate the code.

In summation I'm unsure if: 1) I wrote the apiPromise correctly with a proper try and catch. Does this make sense? 2) Will my promise.all work as expected where IF the second promise does indeed timeout, the user is redirected?

Answer 1

Promise.all() always waits for each promise to return something and if one fails, it will not wait for others to finish, but will throw an error.

What I would do is, set the timeout into the the function that handles fetch() and then destroy it if the fetch finishes in time. Otherwise the redirection will forward the user to where ever. Also in cases the fetch() does finish in time but throws an error, you might want to forward user to a different url, hence the redirect()-function.

 async function apiPromse(url) { const timeout = timeOut(() => redirect(url), ms); try { const response = await fetch(url); // Destroy timeout if a response is received, otherwise redirect clearTimeout(timeout); return await response.json(); } catch (error) { console.log(error); // Redirect to another url in case the fetch() fails clearTimeout(timeout); redirect(url); } } function redirect(url) { window.location.href(url) } async function setup() { const apiResult = await this.apiPromise('url'); // Do Stuff with apiResult }