Sashqa

fetch('https://jsonplaceholder.typicode.com/todos/4')
      .then((response) => {
        response.json().then(console.log);
        return fetch('https://jsonplaceholder.typicode.com/todos/5')
      })
      .then((response) => {
        response.json().then(console.log);
        return fetch('https://jsonplaceholder.typicode.com/todos/6')
      })
      .then(response => response.json().then(console.log))

https://learn.javascript.ru/arrow-functions-basics

Функция возвращает функцию

Я бы сделал управление через стор, а в сторе модифицировал значение уже из сервиса получения - для конкретного вызова api.
К интерсептору бы не стал привязываться.
Ну, или вообще по таймауту - если запрос длится больше 100мс - показывать лоадер.

Но вообще я бы от глобального блокирующего лоадера бы отказался, и использовал бы маленькие локальные лоадеры (блокирующие / показывающие скелеты в отдельных компонентах). А глобальный интерсептор повесил бы разве что на полоску сверху, типа как сделано в ajax bar

Вот здесь хороший пример: https://medium.com/@pavelgonzales/best-practices-%...

Swagger or RAML
Мы используем RAML, но ... дело вкуса.

хрень какую-то понаписали люди конечно... какие спросить, посидеть вместе :| это все может работать максимум с двумя людьми и маленькими задачами и то не идеально.
Нужна чёткая документация - swagger отличный выбор, ну и его альтернативы.

Расширение интерфейсов (это именно расширение, а не наследование) работает по принципу И, а в формировании Record Вы от него ожидаете принципа ИЛИ.
Типы в TypeScript подчиняются достаточно строгой математике, за счет которой он способен статически типизировать всю мощь хаоса динамического JavaScript.
Если не брать в расчет способность интерфейсов к слиянию, то расширение интерфейсов можно считать сахаром над операцией & над типами, то есть это:

interface Field {
  value: any,
  validation?: FieldValidation
}

interface InputField extends Field {
  value: string,
  placeholder: string,
  textarea?: boolean,
  maxChars?: number,
  type?: 'text' | 'email' | 'password' | 'tel' | 'url',
  dark?: boolean,
  disabled?: boolean,
  onInput?: () => any,
  onKeyDown?: () => any,
  onFocus?: () => any,
  onBlur?: () => any
}

аналогично этому:

interface Field {
  value: any,
  validation?: FieldValidation
}

type InputField = Field & {
  value: string,
  placeholder: string,
  textarea?: boolean,
  maxChars?: number,
  type?: 'text' | 'email' | 'password' | 'tel' | 'url',
  dark?: boolean,
  disabled?: boolean,
  onInput?: () => any,
  onKeyDown?: () => any,
  onFocus?: () => any,
  onBlur?: () => any
}

А ожидаемую Вами логику можно получить c помощью операции | следующим образом:

interface BaseField {
  value: any,
  validation?: FieldValidation
}

interface InputField extends BaseField {
  value: string,
  placeholder: string,
  textarea?: boolean,
  maxChars?: number,
  type?: 'text' | 'email' | 'password' | 'tel' | 'url',
  dark?: boolean,
  disabled?: boolean,
  onInput?: () => any,
  onKeyDown?: () => any,
  onFocus?: () => any,
  onBlur?: () => any
}

interface SelectField extends BaseField {
  options: string[],
  value: string,
  placeholder: string,
  dark?: boolean,
  disabled?: boolean,
  onSelect?: () => any,
  onKeyDown?: () => any,
  onFocus?: () => any,
  onBlur?: () => any
}

type Field = InputField | SelectField;
const fields = ref<Record<string, Field>>({
        name: {
          value: '1',
          placeholder: '123'
        },
});

P.S. Для одного доклада по TypeScript готовил такой пример:
https://gist.github.com/bingo347/00652993abf31702c...
Если поймете, как оно работает, то познаете большую часть дзена TypeScript

Через render-функцию разруливайте такие ситуации.

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

Используйте интерцептор.

Подкину свой пример.
Оформил в виде плагина для VUE.
Обратите внимание на эту строчку
export const $axios: AxiosInstance = _axios

Теперь все запросы идут через интерцептор, именно в нём буду ловить и обрабатывать ошибки протокола.

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
import Vue from 'vue'

// Full config:  https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

/* eslint-disable */
const config = {
  baseURL: process.env.VUE_APP_API,
  timeout: 30000,
  validateStatus (status: number) {
    return status < 500 // Resolve only if the status code is less than 500
  }
}
/* eslint-enable */

const _axios: AxiosInstance = axios.create(config)

/* eslint-disable */
// @ts-ignore
_axios.interceptors.request.use(async (config: AxiosRequestConfig): AxiosRequestConfig | Promise<AxiosRequestConfig> => {
  return Promise.resolve(config)
  },  (error) => {
    // Do something with request error
    return Promise.reject(error)
  }
)
/* eslint-disable */

// Add a response interceptor
_axios.interceptors.response.use((response): Promise<AxiosResponse> | any => {
  return response
  },  (error) => {
    // Do something with response error
    return Promise.reject(error)
  }
)

class AxiosPlugin {
  public install () {
    Object.defineProperties(Vue.prototype, {
      axios: {
        get () {
          return _axios
        }
      },
      $axios: {
        get () {
          return _axios
        }
      }
    })
  }
}

const axiosPlugin: AxiosPlugin = new AxiosPlugin()

Vue.use(axiosPlugin)

export default axiosPlugin
export const $axios: AxiosInstance = _axios

Какое видео?)
Куда еще проще обьяснить чем это написано в доке Vue? Вроде разжеванно:
https://vuex.vuejs.org/ru/guide/mutations.html

Терминология
Вкратце: ваше состояние хранится в объекте, называемом хранилищем. Для изменения состояния вы используете действия и мутации, которые также хранятся в состоянии.

Мутации (Mutations)

Чтобы обновить состояние, вам нужно совершить мутацию. Мутация не заботится о бизнес-логике, ее единственной целью является обновление состояния. Мутация является синхронной (ваш код должен ждать, пока мутация не будет завершена). Мутации должны быть единственным способом обновления вашего состояния, чтобы обеспечить управление состоянием предсказуемым

methods: {
  weekDay(date) {
    return new Date(date).toLocaleString('ru-RU', { weekday: 'short' });
  },
  titleDate(dates) {
    return dates
      .map(n => new Date(n).toLocaleString('ru-RU', {
        weekday: 'short',
        month: 'short',
        day: 'numeric',
      }))
      .join(' - ');
  },
},

<v-date-picker
  :weekday-format="weekDay"
  :title-date-format="titleDate"
/>

Что-то типо того.

Получить инпуты и кнопки - document.querySelector
Обработать события - elem.addEventListener
События на инпутах в данном случае - change, будет кстати.
Событие на кнопке - click
Получить данные из инпута - elem.value
Записать значение - elem.value = value
UPD: куб числа рассчитывается как a * a * a, ну или a**3

Развлекайтесь на здоровье

Такие картинки делаются в Polacode - плагине для VS code

Когда вы его получаете - это время его создания. Далее, перед оправкой находите разность между текущим временем и временем его создания.

А можно и не проверять время жизни токена. Просто если в ответе сервера получили ошибку -
if (err.response.status === токен экспайред ....
- получаете новый при помощи рефреш токена.

export const sendHttpRequest = async (id: string, token: string) => {
    try {
        await getProductId(id, token);
        return getContractData(id, token);
    }
    catch (e) {
        console.error(e.message);
        throw e;
    }
};

async function getProductId(id, token) {
    try {
        const variables = {};
        const options = {};
        const req = await fetch(url, options);
        const res = await req.json();
        if (res.data.entityObject.Produkt) {
            idProduct = res.data.entityObject.Produkt.ID;
        } else {
            throw new Error('Some error ...');
            // Или же: return Promise.reject(new Error('Some error ...'));
        }
    }
    catch (e) {
        console.error(e.message);
        throw e;
    }
}