HTTP: Выполните запрос JSONP¶

03.11.2022

"JSON with Padding" (JSONP) — это метод обмана веб-браузера для выполнения запросов с тегом <script>, который использует атрибут SRC для выполнения специального запроса API.

Приложения могут использовать HttpClient для выполнения JSONP запросов через домены, когда сервер не поддерживает протокол CORS.

Запросы Angular JSONP возвращают Observable. Следуйте шаблону подписки на наблюдаемые и используйте оператор RxJS map для преобразования ответа перед использованием async pipe для управления результатами.

В Angular используйте JSONP, включив HttpClientJsonpModule в импорт NgModule. В следующем примере метод searchHeroes() использует JSONP-запрос для поиска героев, имена которых содержат поисковый запрос.

1
2
3
4
5
6
7
8
9

/* GET heroes whose name contains search term */
searchHeroes(term: string): Observable {
  term = term.trim();

  const heroesURL = `${this.heroesURL}?${term}`;
  return this.http.jsonp(heroesUrl, 'callback').pipe(
      catchError(this.handleError('searchHeroes', [])) // then handle the error
    );
}

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

Запрос не JSON-данных¶

Не все API возвращают данные в формате JSON. В следующем примере метод DownloaderService считывает текстовый файл с сервера и регистрирует содержимое файла, а затем возвращает его вызывающей стороне в виде Observable<string>.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

getTextFile(filename: string) {
  // The Observable returned by get() is of type Observable<string>
  // because a text response was specified.
  // There's no need to pass a <string> type parameter to get().
  return this.http.get(filename, {responseType: 'text'})
    .pipe(
      tap( // Log the result or error
      {
        next: (data) => this.log(filename, data),
        error: (error) => this.logError(filename, error)
      }
      )
    );
}

HttpClient.get() возвращает строку, а не JSON по умолчанию из-за опции responseType.

Оператор RxJS tap позволяет коду проверять значения успехов и ошибок, проходящие через наблюдаемую, не нарушая их.

Метод download() в DownloaderComponent инициирует запрос, подписываясь на метод сервиса.

1
2
3
4

download() {
  this.downloaderService.getTextFile('assets/textfile.txt')
    .subscribe(results => this.contents = results);
}

Комментарии