Как сохранить картинку на пк используя кнопку JS?

Используй юзерскрипт менеджер violentmonkey/tampermonkey c GM.xmlHttpRequest/GM_xmlHttpRequest.
Вот тебе простой враппер для него а-ля fetch:

// ==UserScript==
// ...
// @grant       GM.xmlHttpRequest
// ==/UserScript==

async function fetch(url, init = {}) {
    const defaultInit = {method: "get"};
    const {headers, method} = {...defaultInit, ...init};

    return new Promise((resolve, _reject) => {
        const blobPromise = new Promise((resolve, reject) => {
            GM.xmlHttpRequest({
                url,
                method,
                headers,
                responseType: "blob",
                onload: response => resolve(response.response),
                onerror: reject,
                onreadystatechange: onHeadersReceived
            });
        });
        blobPromise.catch(_reject);
        function onHeadersReceived(response) {
            const {
                readyState, responseHeaders, status, statusText
            } = response;
            if (readyState === 2) {
                const headers = parseHeaders(responseHeaders);
                resolve({
                    headers,
                    status,
                    statusText,
                    ok: status.toString().startsWith("2"),
                    arrayBuffer: () => blobPromise.then(blob => blob.arrayBuffer()),
                    blob: () => blobPromise,
                    json: () => blobPromise.then(blob => blob.text()).then(text => JSON.parse(text)),
                    text: () => blobPromise.then(blob => blob.text()),
                });
            }
        }
    });
}

function parseHeaders(headersString) {
    class Headers {
        get(key) {
            return this[key.toLowerCase()];
        }
    }
    const headers = new Headers();
    for (const line of headersString.trim().split("\n")) {
        const [key, ...valueParts] = line.split(":");
        headers[key.trim().toLowerCase()] = valueParts.join(":").trim();
    }
    return headers;
}

Либо скачивай из бекграунд скрипта, если это расширение.

Как сохранить картинку на пк используя кнопку JS?

Спарси правильно имя из ссылки сам, decodeURIComponent в помощь, либо бери его из "Content-Disposition" заголовка (при использовании fetch + downloadBlob из моего ответа), если он есть.

Как дождаться полной загрузки изображений во Vue 3?

https://learn.javascript.ru/onload-onerror#drugie-...

Почему не работает промис?

Лучше с форматированием кода разберись. Код выглядит ужасно.
А уже потом и свою реактивную либу пили (аля rxjs, @vue/reactivity) (лучше — не надо).

Почему не работает промис?

Здесь промисы не нужны. Абсолютно.

Если хочется поэкспериментировать с промисами — console.log для дебага.

Как правильно форматировать файл в Blob?

> зачем

если очень хочется получать данные как строку, исходя из запроса автора:

Вариант axiosa не подходит так как при валидации ошибок сообщения ошибок прилетают в формате blob

что я бы не советовал делать.

да и в любом случает можно без проблем конвертировать блоб в строку, если в нем действительно строка, например, json с ошибкой при статус коде отличном от 2**.

Как правильно форматировать файл в Blob?

потому что бинарная строка (binary string) преобразуется в utf8 строку.
а далеко не каждая последовательность байтов является валидной utf8 строкой.
преобразуй binary string в arraybuffer и передавай в конструктор blob.

и что это еще за эндпойнт такой, что возвращает разные типы ответов с одним и тем же статус кодом (200).

В чем отличие EventLoop в браузере от EventLoop в Node.js?

Да, действительно, не один и тот же (даже за вычетом степа рендеринга). Удалю свой ответ.
https://stackoverflow.com/questions/31582672/
https://nodejs.org/en/docs/guides/event-loop-timer...

Но я крайне совневаюсь что эта разница будет заметна при написании изоморфного кода (один и тот же код для браузера и ноды).

Откуда появилась ошибка Cannot access before initialization?

> package.json не изменялся

Это не значит, что node_modules будет тем же.

Устанавливать те же node_modules нужно с помощью npm ci (из package-lock.json), а не npm i.

Что лучше использовать в связке с Vue - Webpack или Vite?

Запусти ХеллоуВорлд на Вит и сравни сам.

Тем более это займет пару секунд. По-моему, разница будет заметна сразу.

Как сделать прогрессбар с процентами для получения ответа c json по api?

Ну axios это отдельная библиотека (враппер над XHR), а fetch уже есть в браузере. Хотя потребуется несколько вспомогательных строк написать/скопировать.

Главное отличие fetch от XHR это возможность работать со стримом.
Например, можно парсить JSON во время загрузки, но не думаю, что тебе это нужно.
XHR позволяется работать с данными лишь после полной их загрузки.
А дизайн axios даже не позволяет прочесть заголовки до полной загрузки ответа.

Как пофиксить ошибку UnhandledPromiseRejectionWarning в node js?

В первой строке написана причина. Либо в библиотеке ошибка, либо ты неправильно ее используешь, что более вероятно.
В первом случае загугли, глянь issue'ы библиотеки.

Как сделать прогрессбар с процентами для получения ответа c json по api?

Написанное про заголовки в моем ответе актуально и для XHR (axios).

24311 / 0 === Infinity

Как сделать прогрессбар с процентами для получения ответа c json по api?

Так посмотри на код, почему так происходит.

Loaded: {{loaded}} bytes {{length ? "of " + length: ""}}

https://jsonplaceholder.typicode.com/todos не возвращает заголовок content-length, так и сам ответ такой маленький (4 КБ, т.к. передается сжатым, content-encoding: br), что он попадает целиком в один вызов onProgress, там не много смысла в полосе загрузки, основанной на процессе загрузки байтов.

Как правильно работать с Promise?

resolve — функция,
resolve(script) вызов функции,
() => resolve(script) — функция.

Как поочередно вставлять json объекты?

JSON.parse(fileContent)

Как поочередно вставлять json объекты?

Используй for of.

Почему не работает post запрос с axios?

RTFM

Как остановить выполнение js кода с условием?

Используй fetch (в качестве AJAX) и await.

Как сделать такую анимацию?

она работает только на джсе, на реакте нет, а мне надо что бы на реакте работала

чем же стал реакт, если он перестал быть js.