Open a new tab when making an asynchronous API call

Question

Open a new tab when making an asynchronous API call

I'm having trouble with calling a function and opening a new tab in my VueJS application. Here is an example of what I want to do:

const someFunction = async () => {
   const value = await api.someCallToApi();
   window.open('https://example.com', '_blank').focus();
}

However, it seems like I can't do this because the window.open is not directly caused by a user action due to the use of await. The order of the api call and opening of the new tab matters for my application's functionality.

Is there a modern and effective alternative approach to solving this issue?

javascript vue.js vuejs2 window.open

Answer 1

Answer №1

If we lived in a perfect world, every asynchronous function would be programmed to return promises automatically. However, there are still some outdated libraries that rely on the use of await. To work around this limitation, you can encapsulate the await function within a Promise like so:

const wait = (ms) => new Promise(resolve => setTimeout(resolve.bind(null, ms/1000), ms));


wait(3*1000).then((sec) => alert(sec + " seconds have elapsed"));

Answer 2

If we lived in a perfect world, every asynchronous function would be programmed to return promises automatically. However, there are still some outdated libraries that rely on the use of await. To work around this limitation, you can encapsulate the await function within a Promise like so:

const wait = (ms) => new Promise(resolve => setTimeout(resolve.bind(null, ms/1000), ms));


wait(3*1000).then((sec) => alert(sec + " seconds have elapsed"));

Answer 3

Answer №2

Trigger a click event programmatically following the completion of your API call:

const runFunction = async () => {
  const result = await api.makeApiRequest();
  const newLink = document.createElement('a');
  newLink.href = 'https://mywebsite.com';
  newLink.target = '_blank';
  newLink.click();
  newLink.remove();
}

Answer 4

Trigger a click event programmatically following the completion of your API call:

const runFunction = async () => {
  const result = await api.makeApiRequest();
  const newLink = document.createElement('a');
  newLink.href = 'https://mywebsite.com';
  newLink.target = '_blank';
  newLink.click();
  newLink.remove();
}

Open a new tab when making an asynchronous API call

Answer №1

Answer №2

Similar questions

Incorporate various pieces of information into an object

The Gulp task abruptly terminates before the Stream has a chance to trigger the "end" event

Error: The call stack has reached its maximum size while running an npm install

Prevent strange appearances when using slideDown animation

Creating a cutting-edge Windows Phone 8 application with JavaScript on Visual Studio 2013 Ultimate, recently updated to update 2

Leveraging require in AWS lambda operations

What web browsers encounter issues when storing XMLHTTPRequest responses in the cache?

The search function on my blog is not displaying the blogs that have been filtered

JQuery Ajax Json Feed Encountering Invalid Character Error

What is the best way to determine the total of values from user-input fields that are created dynamically

OrbiterControls malfunctioning in a three.js application

What is the solution for the error "this.$refs.[ref_name].save is not a function" in a component created with a "v-for" directive?

What is the purpose of the Condition being executed in the screep tutorial?

Passing information from Vue to a modal

Toggle the Material UI checkbox based on the value received from an object input

Guide on using Ajax to log a user in post-registration in Laravel 5.4

Script CSP was declined from loading

Unauthorized access for POST request in WooCommerce API: 401 error

How can I implement a Dynamic Input field using Angular?

Updating the customer's billing address in Stripe without modifying their payment card details