Failed Upload: Typeerror: Cannot Read Property 0 of Undefined
Resolving the JavaScript Promise Error "TypeError: Cannot Read 'Then' of Undefined"
Introduction
Working with JavaScript Hope comes with its own assortment of errors, and a popular one is
TypeError: Cannot read belongings 'then' of undefined.
In this guide, nosotros will embrace two lawmaking examples containing a bugs that crusade this TypeError and then refactor the code to resolve the effect.
Case 1
Say you accept the function getTaxAmount(price, taxRate) . It takes two 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 amount.
Next, call getTaxAmount() function with 2 arguments and log the returned value on the console.
one const getTaxAmount = ( price , taxRate ) => { 2 Math . floor ( ( price * taxRate ) / 100 ) ; iii } ; iv 5 getTaxAmount ( 100 , 12 ) . and so ( ( taxAmount ) => console . log ( taxAmount ) ) ; js
If you run this buggy code on your browser console or using Node CLI, yous will become this error:
1 TypeError: Cannot read belongings 'so' of undefined sh
Instance 2
Here's another case. getGithubOrgs(url) is a function that takes a URL and uses Fetch API to get GitHub system data for a given user(deekshasharma). fetch() makes a network request to the destination URL and returns a Promise that resolves to a response object. The response is then parsed into a JSON. This part is expected to render a Hope that should resolve to JSON information.
The getGithubOrgs() part is then called with an statement containing a valid URL and logs the resulting JSON on the panel.
i part getGithubOrgs ( url ) { two fetch ( url ) . then ( ( response ) => response . json ( ) ) ; iii } iv 5 getGithubOrgs ( six "https://api.github.com/users/deekshasharma/orgs" seven ) . then ( ( jsonData ) => panel . log ( jsonData ) ) ; js
When you run this code in the browser panel, yous will become an error:
1 TypeError: Cannot read property 'then' of undefined sh
What Causes This TypeError
TypeError - Cannot read property 'and then' of undefined is thrown when the caller is expecting a Promise to exist returned and instead receives undefined . Let's consider the in a higher place examples.
In Case i, the getTaxAmount(price, taxRate) function, when called, should have returned a Promise that resolves to a value of 12 . Currently this role simply calculates the tax amount using the two inputs and does not render a value. Hence, the undefined value is returned.
In Instance 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 may have noticed there is no render argument inside the getGithubOrgs(url) function, which means the resulting Promise from the then() method is never returned to the calling code.
How to Ready This Error
To resolve the outcome in both code examples, you'll need to refactor the functions. Let'southward expect at them one past one.
Instance 1
The part getTaxAmount() should be refactored to the code below.
Promise.resolve() returns a resolved Promise with the value of the tax amount calculated by the office. So the calling code will ever receive a Promise every bit long as valid arguments were passed.
1 const getTaxAmount = ( toll , taxRate ) => { 2 return Promise . resolve ( Math . floor ( ( price * taxRate ) / 100 ) ) ; 3 } ; iv five getTaxAmount ( 100 , 12 ) . then ( ( taxAmount ) => console . log ( taxAmount ) ) ; js
Run this code on your browser console or Node CLI, and you should get an ouput of 12 .
Example two
The function getGithubOrgs(url) should be refactored to include a render statement so that a Promise can be returned to the caller.
1 function getGithubOrgs ( url ) { 2 return fetch ( url ) . and so ( ( response ) => response . json ( ) ) ; 3 } 4 5 getGithubOrgs ( "https://api.github.com/users/deekshasharma/orgs" ) . then ( ( res ) => 6 console . log ( res ) 7 ) ; js
Decision
Whenever you see this TypeError while working with JavaScript Promise, the beginning step is to audit the code that was expected to return a Promise . After all, you lot go this mistake when calling the then() method on a Promise . And the TypeError indicates you are calling then() on undefined , which is a hint that the Promise itself is undefined . The next step is to get and debug the code to effigy out why a Hope is not returned. Nosotros looked at two different code examples to see what can potentially crusade this error and how to resolve it.
You can read more about Hope.then() on MDN.
Source: https://www.pluralsight.com/guides/javascript-promise-typeerror:-cannot-read-then-of-undefined
0 Response to "Failed Upload: Typeerror: Cannot Read Property 0 of Undefined"
Post a Comment