Why is this m.request called twice

Question

I'm using Mithrill v1.0.0, here's the code

var scrollable = {};

scrollable.Product = {
    list : [],
    loadList : function(store){
        m.request({
            method : "GET",
            url : "APIUrl" + store,
            withCredentials : true
        }).then(function(result){
            scrollable.Product.list = result;
        })
    }
}

scrollable.oninit = function(){
    scrollable.Product.loadList("authentic")
}

scrollable.view  = function(){
    console.log(scrollable.Product.list.result) //Here's give me two line log
}

On the console, its give me two line log, the first one is undefined, and the second one an array with API result values.

seems loadList is asynchronous - I'll let you fill in the rest — Jaromanda X, Feb 08 '17 at 07:51

score 2 · Answer 1 · answered Feb 08 '17 at 07:58

2

A call to m.request return a promise and trigger a redraw upon completion of its promise chain.

m.request docs

It's drawing twice, once initially and then once again when your m.request completes.

answered Feb 08 '17 at 07:58

Tivac

2,553
18
21

score 0 · Answer 2 · answered Feb 08 '17 at 08:01

I have never used Mithrill but coming from a ReactJS perspective, I'm guessing that the change in state due to the async call resolution triggers a rerender (i.e. runsscrollable.viewagain).

Here's what I think happens:

Initial state: list is empty
scrollable.oninit runs: async method; does not resolve at once.
scrollable.view runs: console prints still empty list.
async method in 2 resolves. list is assigned fetched values.
State change detected, triggering scrollable.view to run again. Console now prints list with API values.

Why is this m.request called twice

2 Answers2