how to do ajax request in clojurescript with reagent?

Question

Say I have a component which needs to request some data from server before rendering.

What I have now is something like with cljs-ajax library:

(def data (r/atom nil)) 

(defn component [id]
  (r/create-class {:reagent-render simple-div
                   :component-did-mount (partial get-data id)}))

(defn get-data [id]
  (GET (str "/api/" id)
     {:handler init}))

(defn init [response]
  (let [data1 (:body response)
        data2 (compute data1)
        data3 (compute2 data2)]
    (reset! data (compute3 data1))
    (.setup @data data1)
    (.setup2 @data data2)
    (.setup3 @data data3))

the setup functions are some foreign JS library functions with side effects.

This works but I don't feel like this is the correct way to do callback. Not to mention if I need to GET other datas based on the first data I got, and then other datas based on that, it would be a very nasty chain of callbacks.

Is there a better, clean way of doing this kind of ajax request in reagent/clojurescript?

Use [core.async](https://github.com/clojure/core.async/) to escape callback hell. — Terje Norderhaug, Jun 11 '16 at 22:43
https://github.com/r0man/cljs-http <-- if you haven't seen this, you might find it useful — Timothy Pratley, Jun 12 '16 at 03:06

score 13 · Accepted Answer · answered Jun 12 '16 at 03:10

The most common way to make requests is cljs-http. Add [cljs-http "0.1.39"] to the dependencies in project.clj and restart the figwheel process in the terminal to pick up the new dependency.

(ns my.app     
  (:require
    [cljs.core.async :refer [<!]] [cljs-http.client :as http])
  (:require-macros [cljs.core.async.macros :refer [go]])

(go (let [response (<! (http/get "data.edn"))]
  (prn (:status response))
  (prn (:body response))))

Cljs-http is a nice way to manage HTTP requests. It uses core.async channels to deliver its results. For now, all you need to focus on is that http/get and http/post calls should occur inside a go form, and the result is a channel that can have its result read with

Dependent http gets can be chained together in a sensible way in a single go block that looks like sequential code, but occurs asynchronously.

Isn't that clj-http not cljs-http? They are not the same are they? — LoveProgramming, Jun 14 '16 at 17:12
This answer except for the last paragraph is a verbatim copy-paste from the book "Professional Clojure". The answerer is one of the authors of that book, though. — mwal, Nov 30 '20 at 16:27

how to do ajax request in clojurescript with reagent?

1 Answers1