LeCodesdocs

Загрузка данных из сети

Экран запрашивает список пользователей, показывает статус, пока идёт запрос, и заполняет прокручиваемый список ответом. fetch асинхронный, а разбор тела — нет: res.json() возвращает данные сразу. Прокручивается только UIScrollable, и он же даёт pull-to-refresh.

Форкнуть в LeCodes
type User = { id: number; name: string; email: string }

let statusText: UIText
let list: UIColumn

const loadData = async () => {
    statusText.text = "Loading..."

    const res = await fetch("https://jsonplaceholder.typicode.com/users")
    if (res.status !== 200) {
        statusText.text = "Error loading data"
        return
    }

    const users = res.json<User[]>()  // sync — no await

    statusText.text = ""
    list.setContent(
        users.map(user =>
            UIColumn([
                UIText(user.name).style({ fontWeight: 700, color: "white" }),
                UIText(user.email).style({ color: "#888", fontSize: 13 })
            ]).style({ px: 16, py: 12, gap: 4 })
        )
    )
}

const screen = UIScreen([
    UIText("Users").style({ fontSize: 24, fontWeight: 700, color: "white", mb: 8 }),
    statusText = UIText("").style({ color: "#888" }),
    UIScrollable([
        list = UIColumn([])
    ]).style({ flexGrow: 1 })                 // the ONE scrolling body — the screen itself never scrolls
    .onRefresh(() => loadData())              // pull-to-refresh; attached before screen.open()
])
.style({ bgColor: "black", p: 16, pt: "max(safe-top, 24px)" })
.onOpen(() => loadData())

screen.open()

Нажмите «Запустить» — откроется плавающий симулятор. Он остаётся на месте, пока вы читаете: другой пример просто заменит приложение внутри.

Связанные разделы