Привет еще раз, мы встроили Vuetify в Netsuite, но для создания приложения требуется больше, потому что в какой-то момент потребуются данные из Netsuite или другой службы.

Поэтому возникает вопрос, какой HTTP-клиент может быть полезен и одновременно будет совместим с нашим приложением?

Ответ: Axios-HTTP, и согласно его веб-сайту

Axios – это HTTP-клиент на основе обещаний для node.js и браузера. Он изоморфен (= он может работать в браузере и на nodejs с одной и той же кодовой базой). На стороне сервера используется собственный модуль node.js http, а на стороне клиента (браузера) — XMLHttpRequests.

Следовательно, в следующих абзацах я объясню, как использовать Axios-HTTP в нашем компоненте Vuetify. Давайте начнем

Изменение HTML-страницы

Мы будем использовать компонент таблицы данных. Поэтому мы возьмем шаблон HTML, который предоставляет Vuetify.

Компонент таблицы данных — Vuetify (vuetifyjs.com)

Изменение сценария логического компонента

Следующим шагом является дополнение нашего компонента data table необходимым сценарием; нам повезло, Vuetify предоставляет его. Таким образом, предыдущий код будет изменен, и он будет похож на этот.

Прежде чем продолжить, убедитесь, что компонент таблица данных работает в нашем Suitelet правильно. И не забудьте обновить файлы.

Хорошо, у нас все отлично, и пришло время подготовить наши запросы и ответы.

Изменение сценария Suitelet

Код в Suitelet работает. Тем не менее, мы будем его улучшать. Не стесняйтесь копировать и вставлять его. Я объясню это в немного.

Что мы наделали?

  • Во-первых, был включен новый объект с именем handler, в котором мы определим функции запроса.
  • Затем для атрибута GET с именем ui была определена новая стрелочная функция, которая будет принимать ответ атрибута от объекта контекста.
  • Следующим было перемещение блока кода внутри функции точки входа onRequest в функцию стрелки ui.
  • Затем мы должны будем получить транзакции заказа на продажу. Поэтому мы создали еще одну стрелочную функцию с атрибутом GET для выполнения поиска заказа на продажу.
  • Кроме того, мы определили вспомогательную функцию под названием setResponse для указания кодировки ответов Suitelet.
  • Наконец, мы переписали тело функции входа onRequest. И, как вы можете заметить, handler будет выполнять определенную функцию в зависимости от метода запроса и полученной операции в качестве параметра.

Время использовать Axios-HTTP

Теперь пришло время включить нашего главного героя Axios-HTTP. И мы будем следовать следующим шагам.

  • Мы изменим шаблон HTML, чтобы создать элемент скрипта для ссылки на Axios CDN и включить клиент Axios-HTTP.
  • Мы добавим новый элемент кнопки для выполнения запроса GET. И последнее, но не менее важное: мы определим новые свойства в таблице данных и компоненте кнопки для отображения загрузчика.
  • Мы изменим атрибут данных, добавив две переменные и обработав загрузчики, и удалим элемент внутри массива salesOrders.
  • В атрибуте methods мы определим функцию, которая будет выполняться кнопкой. И здесь Axios творит чудеса.

Как вы заметили, пользоваться Axios очень просто. Кроме того, они предоставляют несколько полезных примеров.

Аксиос-HTTP — Примеры

Мы почти на месте. Нам нужно обновить файлы в Netsuite, обновить наш Suitelet и посмотреть, как компонент таблицы данных отображает информацию о заказе на продажу.

Красивый!

Мы сделали это. Мы создали практический пример в Netsuite с использованием Vuetify и клиента Axios-HTTP. Теперь твоя очередь. Дайте мне знать, если вы планируете использовать их в своем следующем проекте Suitelet .

Надеюсь, вам понравилось читать эту статью. Увидимся на следующем.