'then' of Undefined Typeerror: Cannot Read Property 'then' of Undefined at Database
Resolving the JavaScript Promise Error "TypeError: Cannot Read 'Then' of Undefined"
Introduction
Working with JavaScript Hope comes with its own array of errors, and a popular one is
TypeError: Cannot read property 'then' of undefined.
In this guide, we will embrace ii lawmaking examples containing a bugs that cause this TypeError and so refactor the code to resolve the issue.
Example 1
Say you lot take the function getTaxAmount(cost, taxRate) . Information technology takes ii arguments, toll and taxRate , calculates the amount of taxation using the inputs, and is expected to return a Promise that resolves to the calculated taxation corporeality.
Side by side, call getTaxAmount() function with 2 arguments and log the returned value on the console.
1 const getTaxAmount = ( toll , taxRate ) => { 2 Math . flooring ( ( price * taxRate ) / 100 ) ; iii } ; 4 5 getTaxAmount ( 100 , 12 ) . then ( ( taxAmount ) => console . log ( taxAmount ) ) ; js
If you run this buggy code on your browser panel or using Node CLI, you will become this fault:
1 TypeError: Cannot read property 'and then' of undefined sh
Example ii
Here'southward another case. getGithubOrgs(url) is a function that takes a URL and uses Fetch API to get GitHub system information 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 function is expected to return a Promise that should resolve to JSON data.
The getGithubOrgs() function is then called with an argument containing a valid URL and logs the resulting JSON on the console.
1 office getGithubOrgs ( url ) { 2 fetch ( url ) . and then ( ( response ) => response . json ( ) ) ; iii } 4 five getGithubOrgs ( 6 "https://api.github.com/users/deekshasharma/orgs" 7 ) . and then ( ( jsonData ) => console . log ( jsonData ) ) ; js
When y'all run this code in the browser console, y'all will get an mistake:
1 TypeError: Cannot read property 'then' of undefined sh
What Causes This TypeError
TypeError - Cannot read property 'then' of undefined is thrown when the caller is expecting a Promise to exist returned and instead receives undefined . Allow's consider the to a higher place examples.
In Example i, the getTaxAmount(toll, taxRate) role, when called, should have returned a Hope that resolves to a value of 12 . Currently this role simply calculates the revenue enhancement corporeality using the two inputs and does not return a value. Hence, the undefined value is returned.
In Example 2, the getGithubOrgs(url) function calls the Fetch API, which returns a Promise that resolves to a response object. This resulting Promise is received by the then() method, which parses the response to JSON using the json() method. Finally, so() returns a new Hope that resolves to JSON. But y'all may have noticed there is no return statement inside the getGithubOrgs(url) function, which means the resulting Promise from the and so() method is never returned to the calling code.
How to Fix This Fault
To resolve the upshot in both code examples, yous'll need to refactor the functions. Allow'south wait at them one by one.
Example ane
The function getTaxAmount() should be refactored to the code below.
Promise.resolve() returns a resolved Promise with the value of the revenue enhancement corporeality calculated by the part. And then the calling code will always receive a Promise as long as valid arguments were passed.
1 const getTaxAmount = ( toll , taxRate ) => { 2 return Promise . resolve ( Math . flooring ( ( cost * taxRate ) / 100 ) ) ; three } ; 4 5 getTaxAmount ( 100 , 12 ) . then ( ( taxAmount ) => console . log ( taxAmount ) ) ; js
Run this code on your browser console or Node CLI, and yous should become an ouput of 12 .
Example 2
The part getGithubOrgs(url) should exist refactored to include a render statement and then that a Promise tin can be returned to the caller.
1 function getGithubOrgs ( url ) { 2 render fetch ( url ) . so ( ( response ) => response . json ( ) ) ; 3 } 4 5 getGithubOrgs ( "https://api.github.com/users/deekshasharma/orgs" ) . then ( ( res ) => vi console . log ( res ) 7 ) ; js
Conclusion
Whenever you see this TypeError while working with JavaScript Promise, the first step is to inspect the lawmaking that was expected to return a Promise . Afterwards all, you get this error when calling the then() method on a Promise . And the TypeError indicates y'all are calling then() on undefined , which is a hint that the Promise itself is undefined . The next footstep is to go and debug the code to effigy out why a Hope is not returned. We looked at two different code examples to see what tin potentially cause this error and how to resolve it.
You can read more most Promise.then() on MDN.
Source: https://www.pluralsight.com/guides/javascript-promise-typeerror:-cannot-read-then-of-undefined
0 Response to "'then' of Undefined Typeerror: Cannot Read Property 'then' of Undefined at Database"
Post a Comment