# Using .then syntax to fetch CSV data from GitHub url

**URL:** <https://talk.observablehq.com/t/using-then-syntax-to-fetch-csv-data-from-github-url/7435>\
**Category:** Help\
**Created:** [December 20, 2022, 5:59am UTC](https://talk.observablehq.com/t/using-then-syntax-to-fetch-csv-data-from-github-url/7435 "2022-12-20T05:59:25Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![zachbogart](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/zachbogart/32/8597_2.png) [@zachbogart](https://talk.observablehq.com/u/zachbogart)\
**Post date:** [December 20, 2022, 5:59am UTC](https://talk.observablehq.com/t/using-then-syntax-to-fetch-csv-data-from-github-url/7435/1 "2022-12-20T05:59:25Z")

</div>

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?

- [Notebook](https://observablehq.com/d/a724604dfe0c4ff1)

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [December 20, 2022, 10:32am UTC](https://talk.observablehq.com/t/using-then-syntax-to-fetch-csv-data-from-github-url/7435/2 "2022-12-20T10:32:49Z")

</div>

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:

```javascript
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:

```javascript
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:

> **[Using promises - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)**
>
> A Promise is an object representing the eventual completion or failure of an asynchronous operation. Since most people are consumers of already-created promises, this guide will explain consumption of returned promises before explaining how to create...

---

<div class="post-metadata">

**Author:** ![zachbogart](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/zachbogart/32/8597_2.png) [@zachbogart](https://talk.observablehq.com/u/zachbogart)\
**Post date:** [December 20, 2022, 6:43pm UTC](https://talk.observablehq.com/t/using-then-syntax-to-fetch-csv-data-from-github-url/7435/3 "2022-12-20T18:43:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [December 20, 2022, 7:51pm UTC](https://talk.observablehq.com/t/using-then-syntax-to-fetch-csv-data-from-github-url/7435/4 "2022-12-20T19:51:37Z")

</div>

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:

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

```

```javascript
{
  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)
  });
}

```

---

<div class="post-metadata">

**Author:** ![zachbogart](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/zachbogart/32/8597_2.png) [@zachbogart](https://talk.observablehq.com/u/zachbogart)\
**Post date:** [December 20, 2022, 8:12pm UTC](https://talk.observablehq.com/t/using-then-syntax-to-fetch-csv-data-from-github-url/7435/5 "2022-12-20T20:12:49Z")

</div>

Thanks, I appreciate the examples.