Error: Uncaught (in Promise): Typeerror: Cannot Read Property 'post' of Undefined
Resolving the JavaScript Promise Mistake "TypeError: Cannot Read 'So' of Undefined"
Introduction
Working with JavaScript Promise comes with its own array of errors, and a popular one is
TypeError: Cannot read property 'and then' of undefined.
In this guide, we volition cover two code examples containing a bugs that cause this TypeError and then refactor the code to resolve the issue.
Case 1
Say you take the function getTaxAmount(price, taxRate) . It takes ii arguments, price and taxRate , calculates the amount of revenue enhancement using the inputs, and is expected to return a Promise that resolves to the calculated tax corporeality.
Next, call getTaxAmount() function with two arguments and log the returned value on the panel.
1 const getTaxAmount = ( price , taxRate ) => { 2 Math . floor ( ( price * taxRate ) / 100 ) ; 3 } ; 4 5 getTaxAmount ( 100 , 12 ) . then ( ( taxAmount ) => console . log ( taxAmount ) ) ; js
If y'all run this buggy code on your browser console or using Node CLI, you will go this error:
1 TypeError: Cannot read holding 'and so' of undefined sh
Example ii
Here's another example. getGithubOrgs(url) is a function that takes a URL and uses Fetch API to go GitHub organization data for a given user(deekshasharma). fetch() makes a network asking to the destination URL and returns a Promise that resolves to a response object. The response is and then parsed into a JSON. This role is expected to render a Promise that should resolve to JSON information.
The getGithubOrgs() function is and so called with an argument containing a valid URL and logs the resulting JSON on the panel.
1 office getGithubOrgs ( url ) { 2 fetch ( url ) . then ( ( response ) => response . json ( ) ) ; 3 } 4 5 getGithubOrgs ( half-dozen "https://api.github.com/users/deekshasharma/orgs" 7 ) . then ( ( jsonData ) => console . log ( jsonData ) ) ; js
When yous run this code in the browser panel, you will get an error:
1 TypeError: Cannot read property 'then' of undefined sh
What Causes This TypeError
TypeError - Cannot read property 'and so' of undefined is thrown when the caller is expecting a Promise to be returned and instead receives undefined . Allow'south consider the above examples.
In Example i, the getTaxAmount(price, taxRate) function, when called, should have returned a Promise that resolves to a value of 12 . Currently this part simply calculates the tax amount using the ii inputs and does not return a value. Hence, the undefined value is returned.
In Example two, the getGithubOrgs(url) function calls the Fetch API, which returns a Promise that resolves to a response object. This resulting Promise is received past the then() method, which parses the response to JSON using the json() method. Finally, then() returns a new Promise that resolves to JSON. But you lot may have noticed there is no render argument inside the getGithubOrgs(url) function, which means the resulting Promise from the so() method is never returned to the calling code.
How to Fix This Fault
To resolve the issue in both lawmaking examples, yous'll demand to refactor the functions. Permit'south await at them one past ane.
Example ane
The role getTaxAmount() should be refactored to the code below.
Promise.resolve() returns a resolved Hope with the value of the revenue enhancement corporeality calculated by the function. So the calling lawmaking will always receive a Promise as long as valid arguments were passed.
1 const getTaxAmount = ( price , taxRate ) => { ii return Promise . resolve ( Math . floor ( ( price * taxRate ) / 100 ) ) ; 3 } ; four 5 getTaxAmount ( 100 , 12 ) . and so ( ( taxAmount ) => console . log ( taxAmount ) ) ; js
Run this code on your browser console or Node CLI, and you should get an ouput of 12 .
Example 2
The function getGithubOrgs(url) should be refactored to include a return statement so that a Promise tin can be returned to the caller.
1 function getGithubOrgs ( url ) { ii render fetch ( url ) . then ( ( response ) => response . json ( ) ) ; iii } 4 5 getGithubOrgs ( "https://api.github.com/users/deekshasharma/orgs" ) . then ( ( res ) => 6 console . log ( res ) 7 ) ; js
Conclusion
Whenever y'all see this TypeError while working with JavaScript Promise, the commencement step is to audit the lawmaking that was expected to return a Hope . Afterward all, you get this error when calling the so() method on a Promise . And the TypeError indicates you are calling then() on undefined , which is a hint that the Hope itself is undefined . The side by side step is to go and debug the lawmaking to figure out why a Promise is not returned. Nosotros looked at 2 different code examples to see what can potentially cause this error and how to resolve it.
You lot tin read more nigh Promise.so() on MDN.
Source: https://www.pluralsight.com/guides/javascript-promise-typeerror:-cannot-read-then-of-undefined
0 Response to "Error: Uncaught (in Promise): Typeerror: Cannot Read Property 'post' of Undefined"
Post a Comment