Загрузка данных из API с IONIC 4 и угловой

Автор оригинала: Nigel B. Peck.

В этом руководстве демонстрируются, как получить данные из API с использованием IONIC 4 и угловых. Полное руководство направлено на тех, кто только начинает, с Справочный код имеется в наличии. Он поступает в течение всего процесса создания приложения, включая тестирование после каждого шага и совершения Git.

Он использует модуль HTTPClient AngClient, наблюдателей, операторов RXJS, Teamscript, функции стрелки, обещания и async/ждут. Эти концепции не будут изучаться подробно. Ссылки предоставляются по всей статье, чтобы узнать больше.

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

Пример git repo.

Git Reppo с кодом из этого учебника, включая коммиты для каждого раздела, может быть Найдено на Github Отказ Ссылки предоставляются для коммитов в конце каждого раздела, поэтому вы можете проверить свой код против них или пропустить разделы, если вы предпочитаете.

TL; Доктор

Если вы предпочитаете не пройти через учебник, просто Проверьте пример репо Отказ Следующие файлы являются единственными, которые изменены из приложения стартера.

• Класс домашнего компонента
• Домашний компонент шаблон
• Модуль приложения

Создание нового приложения Ionic 4

Чтобы начать, настройте новое приложение, используя Ionic Cli Отказ Чтобы установить его, используйте:

npm install -g ionic

Настройте пустой каталог, чтобы сохранить код. Откройте командную строку/терминал и перейдите в каталог. Создайте новое приложение с CLI:

ionic start LoadDataFromApiOnPageLoadApp blank --type=angular

Легко обслуживать его локально и попробовать:

ionic serve

После короткого ожидания приложение будет запущено и открывается в вашем браузере. Держите сеанс терминала открытой, и он автоматически перезагрузится при изменении. Прохладный!

Если у вас есть какие-либо проблемы, не стесняйтесь сообщить мне в комментариях или свяжитесь со мной через Mode Code Mentor. Обычно это работает без проблем.

Вот полный фиксатор для этого раздела из примера Git Reppo …

• Полный коммит
• Полное дерево для этого фиксации

Очистить дом шаблона

Компонент домашнего страницы уже на месте и готов к работе. Это отличное место для добавления нового кода. Очистите его, так что он готов к следующим шагам.

Открыть /src/app/home/home.page.html Отказ Измените код в:

  
    
      Ionic 4 Example App
    
  



  

    
Data will be presented here...
  

Проверьте приложение в вашем браузере, чтобы увидеть изменения!

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

Местный репо был создан IONIC CLI. Совершить изменения, которые вы сделали до сих пор:

git commit -am "Clean up the home component template"

Вот полный фиксатор для этого раздела из примера Git Reppo …

• Полный коммит
• Полное дерево для этого фиксации

Вот полные версии файлов, которые были изменены в этом комбинировании …

• Домашний компонент шаблон

Подготовьте свойство для данных

Как только данные извлекаются от API, необходимо будет хранить место.

Откройте класс домашнего компонента /src/app/home/home.page.ts Отказ Добавить свойство строки под названием данные прямо в верхней части декларации класса.

data: string;

Новое свойство должна быть инициализирована в конструкторе. Назначьте пустую строку.

this.data = '';

Полный класс теперь должен выглядеть так.

export class HomePage {
  data: string;

  constructor() {
    this.data = '';
  }
}

Теперь это может быть использовано для отображения данных в шаблоне, сразу после введения.

Data will be presented here...
{{ data ? data : '-' }}

Данные будут показаны, если она существует или дефис, если нет. Это сделано с помощью JavaScript Тернарный оператор Отказ

Это хорошая идея, чтобы проверить вещи как можно чаще, особенно потому, что это меньше отлаживает, если что-то пошло не так.

Проверьте приложение в вашем браузере. Вы должны увидеть тире, отображаемую в разделе «Данные будут представлены здесь …». Таким образом, шаблон работает, когда нет данных для отображения. Потрясающие.

Теперь проверьте его с некоторыми данными. Обновите конструктор.

constructor() {
  this.data = 'Test';
}

Подождите, пока приложение для перезагрузки, и вы должны увидеть отображаемый текст. Большой! Все работает, что вы сделали до сих пор. Не забудьте удалить текст и убедитесь, что AppP возвращается к отображению тире.

Вы завершили этот шаг и проверили, что вы сделали. Сейчас самое большое время для получения Git. Таким образом, у вас есть рабочий код тщательно сохранен, а может с радостью написать следующую часть без риска его потерять.

Введите следующую команду для получения ваших изменений.

git commit -am "Prepare a container for the data and present it in the template"

Вот полный фиксатор для этого раздела из примера Git Reppo …

• Полный коммит
• Полное дерево для этого фиксации

Вот полные версии файлов, которые были изменены в этом комбинировании …

• Домашний компонент шаблон
• Класс домашнего компонента

Импортировать модуль httpClient

Модуль необходим для выполнения запросов API. Стандартный модуль для использования с угловой, является HTTPClient Module Отказ Он основан на Наблюдается и хорошо интегрируется с остальной частью структуры.

Для получения дополнительной информации о модуле httpClient, проверьте этот Полезное руководство на угловом месте. Мы не будем смотреть на детали наблюдаемых, которые приходят из RXJS, в этом руководстве. Для общего справки проверить Информация о угловании по теме , Учить rxjs.io или Сам сайт RXJS Отказ

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

Найти корневой модуль приложения на /src/app/app.module.ts Отказ Импортируйте httpClientModule сразу после браунжера.

import { HttpClientModule } from '@angular/common/http';

Добавьте httpClientModule в список импорта в декораторе @ngmodule, сразу после браунжера. Ваш список импорта теперь должен выглядеть так.

imports: [BrowserModule, HttpClientModule, IonicModule.forRoot(), AppRoutingModule]

Импортируйте его в домашний компонент ниже другого импорта.

import { HttpClient } from '@angular/common/http';

Наконец, Введите это В конструкторе для домашнего компонента.

constructor(private http: HttpClient)

Домашний компонент теперь должен выглядеть так.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  data: string;

  constructor(private http: HttpClient) {
    this.data = '';
  }

}

Модуль HTTPClient теперь доступен для использования AS this.http Отказ

Вы завершили этот шаг, так что он готов к тестированию и совершить. Ничто не будет фактически изменить в приложении. Убедитесь, что нагрузки OK OK в браузере, и вы хотите пойти.

Совершить ваши изменения.

git commit -am "Import the HttpClient module"

Вот полный фиксатор для этого раздела из примера Git Reppo …

• Полный коммит
• Полное дерево для этого фиксации

Вот полные версии файлов, которые были изменены в этом комбинировании …

• Модуль приложения
• Класс домашнего компонента

Запросить данные из API

Получение данных API с Httpclient Модуль – двухэтапный процесс. Вам сначала нужно подготовить наблюдаемый, а затем подписаться на него, чтобы выстрелить запрос.

При использовании этого в реальном приложении запрос будет подготовлен в Сервис Отказ Для этого простого примера все можно сделать в компоненте.

Подготовьте наблюдаемый, чтобы сделать запрос

Добавьте следующее в нижнюю часть класса компонентов.

private prepareDataRequest(): Observable

Первая строка определяет метод под названием Подготовительныйawarequest , который возвращает наблюдаемый, что производит объект на успех.

URL для API тогда определяется как https://api.nigelbpeck.com/ Отказ Используя этот URL, запрос на получение подготовлено получить Метод Httpclient модуль. Это даст наблюдаемый на успех.

Чтобы использовать наблюдаемый тип, он должен быть импортирован. Добавьте это в импорт, чуть выше Httpclient Отказ

import { Observable } from 'rxjs';

API конечная точка это используется, возвращает JSON. Модуль httpClient будет автоматически Разбор Это к объекту.

api.nigelbpeck.com Это простой открытый тестовый API, который возвращает данные JSON. Вы можете использовать любой API, который вам нравится здесь. Просто убедитесь, что он отправит данные JSON, содержащие объект.

Инициируйте запрос, подписываясь на наблюдаемый

Теперь, когда Подготовительныйawarequest Метод готов, используйте его для выполнения запроса.

Наблюдаемые не делают ничего, пока их не просят, что сделано путем подписки на них. Так что наблюдаемый возвращен из Подготовительныйawarequest на самом деле не представит запрос на API, пока он не будет подписан.

Добавьте это в класс компонента, сразу после конструктора.

ionViewWillEnter() {
  // Load the data
  this.prepareDataRequest()
    .subscribe(
      data => {
        // Set the data to display in the template
        this.data = JSON.stringify(data);
      }
    );
}

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

Для этого простого примера данные затем преобразуются в строку, чтобы ее можно было отобразить на странице. На данный момент ничего не делается с ошибками. Это придет позже. Предполагая, что нет ошибок из API, которые вы можете проверить, открыв https://api.nigelbpeck.com/ В браузере это должно работать. Пришло время проверить это и добраться до этого.

Тестовый API имеет 5 секундную задержку по умолчанию, поэтому будьте терпеливы во время тестирования. Вы увидите, почему задержка полезна позже. Проверьте приложение в вашем браузере. Строкированные данные должны быть отображены.

Как только это работает, получите его предано и перейти к следующему шагу. Хорошая работа!

git commit -am "Prepare the API request and call it"

Вот полный фиксатор для этого раздела из примера Git Reppo …

• Полный коммит
• Полное дерево для этого фиксации

Файлы изменились в этом фиксации …

• Класс домашнего компонента

Обработка ошибок API

Извлечение данных из API, как при любой сети, подвержена неудаче. Пользователь может потерять подключение к Интернету, сервер может снижаться, API может быть слишком занят или изменился. Все виды вещей могут случиться. Код должен быть готов, если что-то пойдет не так. Добавьте некоторую обработку ошибок, чтобы сообщить пользователю, когда он делает.

Вам понадобится недвижимость для информации об ошибке. Объявите это сразу после собственности для данных.

error: string;

Как и в случае данных, это также необходимо инициализироваться в конструкторе.

this.error = '';

Теперь обновите вызов, чтобы подписаться, добавив второй обработчик для ошибок, как показано ниже.

.subscribe(
  data => {
    // Set the data to display in the template
    this.data = JSON.stringify(data);
  },
  err => {
    // Set the error information to display in the template
    this.error = `An error occurred, the data could not be retrieved: Status: ${err.status}, Message: ${err.statusText}`;
  }
);

С помощью этого на месте любая ошибка, которая возникает, будет подобрана и доступна для шаблона в Это. Эрр Отказ Обновите шаблон, чтобы использовать это.

{{ data ? data : '-' }}
{{error}}

NGIF Директива добавляется в абзац, отображающий данные. С этим на месте, если нет ошибок, данные будут отображаться таким же образом, как это было раньше. Если есть ошибка, пункт данных не будет отображаться, а Errorcontent будет отображаться вместо этого.

Так как это может быть проверено? Один вариант – изменить URL-адрес чего-то, что не будет работать, например api.nigelbpeck.com/foo Отказ

Другой вариант – сказать тестовое API для возврата ошибки. Вы можете сделать это, добавив простой параметр в конец URL-адреса, как это:

const dataUrl = 'https://api.nigelbpeck.com/?throw_error=400';

Вы можете использовать любой код ошибки между 300 и 599, поэтому не стесняйтесь иметь игру с этим и увидеть разные ошибки, возвращающиеся. Некоторые забавные варианты, чтобы попробовать 301, 302, 400, 404 и 500.

Это не рекомендуемый способ обеспечить параметр к модулю HTTPClient. Лучший способ использовать Httpпарамы , но это работает нормально для этого простого теста.

Как только вы закончите тестирование, важно не забыть поставить URL обратно в правильную настройку.

Большой! Ошибки из API обрабатываются гладко, и код более прочно, в результате. Получите это совершено и перейти к следующему шагу.

git commit -am "Handle errors from the API request and inform the user"

Вот полный фиксатор для этого раздела из примера Git Reppo …

• Полный коммит
• Полное дерево для этого фиксации

Файлы изменились в этом фиксации …

• Домашний компонент шаблон
• Класс домашнего компонента

Показать индикатор загрузки

Таким образом, данные загружаются с API и представлены на странице. Ошибки разбираются хорошо, и пользователь знает, когда что-то пойдет не так. Основная функциональность на месте.

Важно учитывать, что нагрузка на страницу быстрее, чем сделать запрос на API. Надеюсь, не намного быстрее в том, как он испытывает, но медленная сеть сделает ее заметным. Тестовый API имитирует это для каждого запроса, имея задержку по умолчанию 5 секунд.

Требуется способ позволить пользователю знать, что что-то происходит, в то время как запрос на API обрабатывается, и отличный способ сделать это с IONIC Индикатор погрузки Отказ Реализовать это сейчас и улучшить пользовательский опыт.

Первое, что нужно сделать, это импортировать OrdingController Отказ Добавьте это только под Компонент Импорт для этого.

import { LoadingController } from '@ionic/angular';

Это также понадобится инъекция в конструкторе, поэтому он доступен для использования. Обновите конструктор, чтобы включить его.

constructor(private http: HttpClient, public loadingController: LoadingController)

Для контроллера будет необходим недвижимость. Добавьте его в верхнюю часть класса.

loading: any;

Теперь добавьте способ представления контроллера загрузки. Положить его чуть выше Подготовительныйawarequest Отказ

async presentLoading() {
    // Prepare a loading controller
    this.loading = await this.loadingController.create({
        message: 'Loading...'
    });
    // Present the loading controller
  await this.loading.present();
}

Способ создания контроллера загрузки возвращает Обещание Итак, Async/await используется для управления этим. Сообщение «Загрузка …» будет отображаться с индикатором загрузки.

Используйте этот новый метод, поэтому индикатор загрузки отображается, когда данные извлекаются. Добавьте это на вершину Ionviewwillenter Отказ

// Present a loading controller until the data is loaded
await this.presentLoading();

С презентация это асинхронный метод, он возвращает обещание, поэтому ждать используется снова. Сделать ждать Доступно для использования, Ionviewwillenter должен быть определен как асинхронный метод. Добавьте async Ключевое слово для декларации метода.

async ionViewWillEnter()

Потрясающие! Все готово к представлению индикатора загрузки. Дайте ему тест и убедитесь, что индикатор отображается.

Без сомнения, вы видите проблему. Индикатор отображается, но он не уходит, когда запрос завершен. Это будет позаботиться о следующем. Этот код работает так, как есть, и подходит для тестирования, так что совершайте его, а затем посмотрите на следующий выпуск.

git commit -am "Present a loading controller while the data loads"

Вот полный фиксатор для этого раздела из примера Git Reppo …

• Полный коммит
• Полное дерево для этого фиксации

Файлы изменились в этом фиксации …

• Класс домашнего компонента

Скрыть индикатор загрузки, когда закончите

Таким образом, индикатор загрузки работает, но он не уходит, когда запрос завершен. Это должно произойти, успешно ли это или нет. Это может пойти в обоих обработчиках (успех и ошибках), но логика будет повторяться, что никогда не является идеальной. Существует лучший способ. RXJS может помочь с этим.

Сила RXJS лежит в своих операторах. Есть много классных вещей, которые они могут сделать, и некоторые предложения для дальнейших исследований будут предложены в конце этого учебника.

Один из операторов RXJS, который доступен доработать оператор Отказ Он обеспечивает способ определить код, который будет работать, когда наблюдаемый завершится, успешно ли или из-за ошибки. Идеально подходит для увольнения индикатора загрузки.

Чтобы использовать это, оператор должен быть импортирован. Добавьте это только после импорта Наблюдаемый Отказ

import { finalize } from 'rxjs/operators';

Теперь, когда оператор доступен, обновите звонок на Подготовительныйawarequest () , перед подпиской на это. Линии чуть выше и ниже предоставлены, чтобы помочь найти правильное место.

this.prepareDataRequest()
    .pipe(
        finalize(async () => {
            // Hide the loading spinner on success or error
            await this.loading.dismiss();
        })
    )
    .subscribe(

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

Обратный вызов для доработать определяется как асинхронная функция, и вызов сделан для увольнения индикатора загрузки, используя Это.loading.dismiss Отказ Дайте это тест.

Как только запрос API завершен, будь то успешный или нет, индикатор погрузчика должен исчезнуть. Попробуйте тестировать это оба способа, используя ту же методику, что и выше, чтобы создать ошибку. Большой! Получить это совершено.

get commit -am "Dismiss the loading spinner once the API request is complete"

Вот полный фиксатор для этого раздела из примера Git Reppo …

• Полный коммит
• Полное дерево для этого фиксации

Файлы изменились в этом фиксации …

• Класс домашнего компонента

Следующие шаги

Все сделано. Вы создали простое приложение, чтобы увидеть, как данные API могут быть загружены в Ionic 4 и угловые. Надеюсь, вы четко следили за шагами, даже если весь код был не понятен вам.

Куда идти дальше, зависит от вас. Приложение должно действовать как полезное ссылка. Вы можете пожелать построить его еще немного. Некоторые предложения для способов сделать это приведены ниже.

Полный пример код – Доступно на GitHub Отказ Если у вас есть какие-либо комментарии или вопросы о чем-либо здесь, пожалуйста, не стесняйтесь оставить комментарий ниже, свяжитесь со мной через Код наставника или тянуться на Twitter Отказ

Пожалуйста, подумайте, как если бы вы наслаждались этим руководством!

Предложения для дальнейшего развития

Вот несколько предложений о том, как вы могли бы построить этот код, чтобы исследовать больше концепций …

Сделайте что-то более интересное с данными. Представьте это в некоторых интересных способах, играйте вокруг Угловой шаблон Отказ

Повторите попытку подключения, если он не удается. Как упомянуто выше, RXJS имеет много операторов, которые вы можете использовать. Один из них – Повторите попытку которые будут повторять запрос на указанное количество раз, если оно должно потерпеть неудачу. Попробуйте добавить его в свою трубу.

Преобразовывать данные. Для более веселья с операторами RXJS, попробуйте использовать карта преобразовать данные.

Программа Mentoring Mentoring Mentoring Web App

Я создаю программу наставничества, чтобы узнать основы разработки веб-приложения. Вы можете работать со мной в качестве наставника, или он доступен для других наставников, чтобы использовать и помочь улучшить. Весь материал свободен и на Github. Это даже Есть сайт ! Я предлагаю Бесплатная сессия Чтобы обсудить, как это может работать для вас.