javascript-fix-promises — human mapping

This mapping has 2 multi-map groups: several pairings are equally correct there. The code view shows one arbitrary valid pairing, not the only one.

A painting is a person's account of this edit as text, recorded independently of the node mapping - a rendering often has several equally defensible answers where the mapping has one. Deletions and insertions carry no position on the opposite side in a painting, so that panel draws no caret for them.

Before1function fetchData() {
2    return new Promise((resolve) => {
3        setTimeout(() => {
4            resolve("data");
5        }, 1000);
6    });
7}
8
9fetchData().then((data) => {
10    console.log(data);
11});
12

After1function fetchData() {
  return new Promise((resolve, reject) => {
      setTimeout(() => {
          try {
              resolve("data");
          } catch (error) {
              reject(error);
          }
      }, 1000);
  });
11}
12
13fetchData()
  .then((data) => {
      console.log(data);
  })
  .catch((error) => {
      console.error("Error:", error);
  });
20

Before1function fetchData() {
2    return new Promise((resolve) => {
3        setTimeout(() => {
4            resolve("data");
5        }, 1000);
6    });
7}
8
9fetchData().then((data) => {
10    console.log(data);
11});
12

After1function fetchData() {
  return new Promise((resolve, reject) => {
      setTimeout(() => {
          try {
              resolve("data");
          } catch (error) {
              reject(error);
          }
      }, 1000);
  });
11}
12
13fetchData()
  .then((data) => {
      console.log(data);
  })
  .catch((error) => {
      console.error("Error:", error);
  });
20

Before1function fetchData() {
2    return new Promise((resolve) => {
3        setTimeout(() => {
4            resolve("data");
5        }, 1000);
6    });
7}
8
9fetchData().then((data) => {
10    console.log(data);
11});
12

After1function fetchData() {
  return new Promise((resolve, reject) => {
      setTimeout(() => {
          try {
              resolve("data");
          } catch (error) {
              reject(error);
          }
      }, 1000);
  });
11}
12
13fetchData()
  .then((data) => {
      console.log(data);
  })
  .catch((error) => {
      console.error("Error:", error);
  });
20

Before

program

function_declaration

function "function"

identifier "fetchData"

formal_parameters

( "("

) ")"

statement_block

{ "{"

return_statement

return "return"

new_expression

new "new"

identifier "Promise"

arguments

( "("

arrow_function

formal_parameters

( "("

identifier "resolve"

) ")"

=> "=>"

statement_block

{ "{"

expression_statement

call_expression

identifier "setTimeout"

arguments

( "("

arrow_function

formal_parameters

( "("

) ")"

=> "=>"

statement_block

{ "{"

expression_statement

call_expression

identifier "resolve"

arguments

( "("

string

" "\""

string_fragment "data"

" "\""

) ")"

; ";"

} "}"

, ","

number "1000"

) ")"

; ";"

} "}"

) ")"

; ";"

} "}"

expression_statement

call_expression any 2:3

member_expression any 1:2

call_expression any 2:3

identifier "fetchData"

arguments

( "("

) ")"

. "."

property_identifier "then"

arguments (+23 nodes collapsed)

; ";"

After

program

function_declaration

function "function"

identifier "fetchData"

formal_parameters

( "("

) ")"

statement_block

{ "{"

return_statement

return "return"

new_expression

new "new"

identifier "Promise"

arguments

( "("

arrow_function

formal_parameters

( "("

identifier "resolve"

, ","

identifier "reject"

) ")"

=> "=>"

statement_block

{ "{"

expression_statement

call_expression

identifier "setTimeout"

arguments

( "("

arrow_function

formal_parameters

( "("

) ")"

=> "=>"

statement_block

{ "{"

try_statement

try "try"

statement_block

{ "{"

expression_statement

call_expression

identifier "resolve"

arguments

( "("

string

" "\""

string_fragment "data"

" "\""

) ")"

; ";"

} "}"

catch_clause

catch "catch"

( "("

identifier "error"

) ")"

statement_block

{ "{"

expression_statement

call_expression

identifier "reject"

arguments

( "("

identifier "error"

) ")"

; ";"

} "}"

, ","

number "1000"

) ")"

; ";"

} "}"

) ")"

; ";"

} "}"

expression_statement

call_expression any 2:3

member_expression any 1:2

call_expression any 2:3

member_expression any 1:2

call_expression any 2:3

identifier "fetchData"

arguments

( "("

) ")"

. "."

property_identifier "then"

arguments (+23 nodes collapsed)

. "."

property_identifier "catch"

arguments

( "("

arrow_function

formal_parameters

( "("

identifier "error"

) ")"

=> "=>"

statement_block

{ "{"

expression_statement

call_expression

member_expression

identifier "console"

. "."

property_identifier "error"

arguments

( "("

string

" "\""

string_fragment "Error:"

" "\""

, ","

identifier "error"

) ")"

; ";"

} "}"

) ")"

; ";"

Keybindings

j / k: next / previous visible node (tree panels)
h / l: collapse / expand the focused node
g / G: jump to first / last visible node
Tab: switch focus between Before/After panels
/: search: jump to next node whose text contains a given string
a: jump the other panel to this node's mapped counterpart
i: hide identical matches, showing only inserted/deleted/updated nodes and their ancestors
v: cycle the view: split / code only / tree only
p: cycle what the code view renders: the node mapping, then each human painting
r: mark this fixture as reviewed, or forget the mark (kept in this browser only)
n: open a random fixture not yet marked as reviewed
?: toggle this help