Объясните что происходит в этом участке JS кода?

Question

[Денис Лабутин]

const _products = [....]; 
let shop = {
    getProducts (cb) {
        setTimeout(() => cb(_products), 100)
    },
};

shop.getProducts(products => {
      commit('setProducts', products)
    })

Нужно получить список продуктов не понимаю как это все устроено.
Я так понимаю мы передаем в getProducts эту функцию

products => {
      commit('setProducts', products)
    }

и в эту функцию предается _products (константа) и там выполняется???
Это пример из Vuex'a.
Зачем это сделано?
Это только из за setTimeout чтобы отправить эту функцию в очередь?
В реальном примере нельзя просто return.
Очень трудно понять эту кучу колбеков передающихся из одной функции в другую. Есть может статьи какие нибудь? Это все из за асинхронности кода, и как перестроиться ?

Comments

[Klein Maximus]

не нужно в мутациях делать что-то асинхронное - они должны быть синхронными

Answer 1

[profesor08]

Это сделано скорее всего для достижения асинхронности работы, просто в демонстрационных целях. Вместо того, чтоб делать ajax запрос на сервер, а до этого поднимать сервер, там используется таймаут, который работает с данными о продуктах. Лишь в целях демонстрации.

Comments

[AngReload]

В этом коде достаточно поменять setTimeout на fetch и уже будут данные с сервера загружаться.
А вот переделать синхронный код в асинхронный уже проблема.

Answer 2

[Klein Maximus]

В этом коде происходит следующее: shop.getProducts запустит мутацию setProducts через 100 мс. Тут создается имитация обращения к удаленному сервису.