Receiving the final outcome of a promise as a returned value

Seeking to deepen my comprehension of promises. In this code snippet, I am working on creating two promises that will return the numbers 19 and 23 respectively. However, when attempting to console log the value returned from the first promise, I encounter an error stating 'promise1.then is not a function.' How can I access the eventual value returned from promise1? Many thanks.

const promise1 = () => new Promise((resolve, reject) => {
  console.log('inside promise1');
    setTimeout(resolve, 1000, 19);
});

const promise2 = () => new Promise((resolve, reject) => {
    setTimeout(resolve, 3000, 23);
});

promise1.then(d => console.log(d));

Answer №1

Just a little further! Make sure to remember that Promise1 is a function that returns a promise. The error you are encountering is due to not treating promise1 as a function.

Add brackets to the code where you call it.

promise1().then(d => console.log(d));

Here is the complete code snippet:

const promise1 = () => new Promise((resolve, reject) => {
  console.log('inside promise1');
    setTimeout(resolve, 1000, 19);
});

const promise2 = () => new Promise((resolve, reject) => {
    setTimeout(resolve, 3000, 23);
});

promise1().then(d => console.log(d));

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Preloader will properly handle websocket connections along with pace js

I recently implemented a preloader on my website built with Ruby on Rails. Everything seems to be working perfectly, except for the fact that due to Pusher websockets, the preloader does not stop and keeps running indefinitely. I attempted to address this ...

Modify hyperlink address according to chosen option

Looking to incorporate a select input in Laravel using the latest alpine.js build. Here's what I have in mind: {{ Form::select('dogs', $dogs) }} This utilizes LaravelCollective HTML for streamlined form creation. Once an option is chosen, ...

Angular failing to reflect changes in my select element according to the model

One issue I'm facing in my application is with grouped select elements that share the same options. Whenever one select element changes, it checks the others to see if the new option selected has already been chosen in any of the other selects. In suc ...

Changing URI to File Object using JavaScript

I have successfully retrieved the URI of a selected file in my Ionic app using the cordova-fileChooser plugin. Next, I used the cordova-plugin-filepath to obtain the absolute path of the file from the nativeURL on the phone. Now, the challenge is how do ...

Could the issue at hand possibly stem from the fact that the router isn't fully operational? It appears that router.query

Having trouble retrieving the parameters from the URL using router.query. I've tried various approaches but keep getting an undefined result. It seems like I'm on the right track, though. Highlighted query param in yellow... https://i.stack.img ...

Utilizing Node.js, delete the author from the database and then use a GET request to display all

Exploring node and express for the first time. I've been working on an example that utilizes GET and POST methods, but now I want to implement DELETE function to delete a book based on its title. Additionally, I need to introduce another GET method to ...

Check the email for accuracy and show as needed

I need help verifying email validity in JavaScript and displaying an alert box if it's invalid. If the email is valid, I want to display div2 instead. However, my current code doesn't seem to be working as expected. Below is the JavaScript code ...

Tips on elevating a dragged div above all other elements when utilizing two scrollbars

Currently, I have two horizontal scrollers where I need to drag a div from the upper scroller to the lower scroller. While this functionality is working properly, there is an issue with the dragged div getting lost under the borders of the scroller during ...

Directive Template with Dynamic Fields (AngularJS)

I am interested in creating a custom directive that can bind to any object, allowing me to specify the field used in the template for display. Previously, I was limited to using {{item.Name}}, but now I want the flexibility to define the display field. Cu ...

Using Javascript variables within Django HTML templates

As I develop my Django app, I find myself in uncharted territory with JavaScript. My goal is to integrate a map into one of my pages by adding a few lines of JavaScript. The JavaScript code includes initializing the map and placing markers based on data s ...

Enforcing Sequential Execution in Node.js

I have finally grasped the concept of callbacks in node.js, but now I am striving to ensure that my code executes in the correct sequence. Here are the steps I aim to follow: Retrieve the URL content using cheerio. Iterate through each <td> elemen ...

Is there a lack of a feature for automatically shifting to the next input element in dynamically-created HTML?

I have a JavaScript function that is triggered when a user clicks a button: htmlstring = ''+ '<div class="input_holder">'+ '<div class="as_input_holder"><input tabindex="1" class="as_input form-control-sm ...

Using Vue.js for handling events with the passing method

As a newcomer to Vue.js, I am currently trying to understand method event handling. My goal is to read a barcode using input from a web camera and display its raw content. The function works perfectly if I just render the raw content. However, when I att ...

Load styles in Nuxt asynchronously to improve performance

Is there a way to load styles asynchronously on the website or insert them in the footer? I am currently using Nuxt version 2.0.0 Here's what I have tried so far: Adding a plugin in webpack called async-stylesheet-webpack-plugin. However, this res ...

Experiencing a problem when attempting to activate the html5 mode feature in AngularJS to eliminate the #

I've been scouring through various sources like stackoverflow and the web, but I haven't found a clear answer to my question. Can someone please help me out? Here's what I'm struggling with: In my AngularJS application, I enabled &apos ...

Issue encountered while executing tasks in the Gruntfile.js file

Having trouble with Grunt concatenating my CSS files into one named production.css Below is the output I received from the command prompt: C:\Users\josha\Desktop\Repos\AJAX Project - Grunt Test>grunt C:\Users\josha& ...

Navigate audio tracks with JavaScript

I'm currently facing an issue with using a button to switch between two audio tracks being played in the browser. The method I have implemented switches to the second track, but it doesn't change the audio that is played afterward - instead, it s ...

The initial render in a Kanban board seems to be causing issues with the functionality of react-beautiful-dnd

I recently integrated a Kanban board into my Next.js and TypeScript project. While everything seemed to be working fine, I encountered a minor glitch during the initial rendering. Interestingly, when I refreshed the page, the drag and drop functionality st ...

experiment with jest and react-testing-library for testing functions

I'm having trouble accessing a method inside a functional component in React using Jest and react-testing-library. I attempted to use enzyme, but it seems like everything is shifting towards RTL instead. import React from "react"; const simpleCompo ...

Trigger function in a different child component on mouse up

Trying to call a function in a child component from another child component in ReactJS. Specifically, I want to trigger a function in another component when the 'mouseup' event happens. Here is an illustration of what I am attempting to achieve: ...