Using .then syntax to fetch CSV data from GitHub url

Community Help
1

I am able to read in data from a github url, but am wondering how I could use the Observable fetch url snippet to solve the same problem. Ran into troubles converting code to use .then syntax. In general, if I don’t use d3.csv directly, what would a fetch…then look like?

2

I recommend that you don’t use await unless you store the intermediate results, because it’s easy to lose track of the proper nesting.

For example:

fetchMethodExpanded = {
  const url = "https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2022/2022-01-11/colony.csv"
  const res = await fetch(url);
  const text = await res.text();
  return d3.csvParse(text);
}

The equivalent using .then() would be:

fetchMethodExpanded = {
  const url = "https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2022/2022-01-11/colony.csv"
  return fetch(url)
    .then(res => res.text())
    .then(text => d3.csvParse(text));
}

I’d also recommend that you avoid let unless you actually plan to reassign the variable. const is only two letters longer, but will make your code much more robust.

You can read more about Promises here:

1 Like
3

Thanks for your help! As an aside, do you have a preference for one of these methods used (.then or expanded out or otherwise)?

4

They are not interchangeable, concurrency is harder to do with await. Beyond that I try to pick the one that seems more readable to me, and often use a mix of both.

An example is this resolveObject object helper that lets you await an object’s Promise values:

resolveObject = obj => Promise.all(
  Object.entries(obj).map(async ([k, v]) => [k, await v])
).then(e => Object.fromEntries(e))

{
  const {runtime, define} = await resolveObject({
    runtime: import("https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js"),
    define: import("https://api.observablehq.com/@observablehq/demo.js?v=4").then(m => m.default)
  });
}
5

Thanks, I appreciate the examples.