datatables.net ajax вне углового охвата не вызывает перехватчик - PullRequest
0 голосов
/ 26 февраля 2019

Угловой CLI: 7.3.3 |Узел: 10.7.0 |ОС: Linux x64 |Угловая: 7.2.6

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

Пример проекта -> https://github.com/sibelly/angular-with-datatablesnet

Этот пример использует API themoviedb, он только для тестирования, это не мой реальный сценарий.Здесь, в этом проекте, я не активирую опцию серверной стороны, как я сказал, только для проверки вызова моего перехватчика, просто чтобы доказать, что с ajax напрямую перехватчик не вызывается.

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

Когда я вызываю APIКонечная точка, использующая HttpClient, обычно вызывает мой error.interceptor.ts, но информация разбивки на страницы, сортировки и фильтрации не передается в URL.

Итак, я пришел к выводу, что мне нужно вызывать его через Ajax, когда я вызываю с использованием ajax, параметры отправляются, как и ожидалось.

Но происходит то, что срок действия токена пользователя истекает, и мне нужноперенаправить на страницу входа еще раз.И это делается с помощью перехватчиков angular, которые не активируются при вызове с использованием ajax напрямую, поскольку он находится за пределами области видимости angular.

Чтобы возобновить, как я могу перехватить вызов ajax из каркаса datatables.net в моем angularпроект?Или есть другой способ сделать серверную нумерацию страниц, сортировку и фильтрацию?

movie.component.ts

ngOnInit() { 

//When calling this method the error.interceptor is activated normally
//this.getMostPopularMovies();   

//But when I call direct using the AJAX, the interceptor doesn't work
 this.dtOptions = {
   ajax: {
     url: 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=2ed54a614803785fce2d7fe401cc3b21',
     params: {
       api_key: this.moviedbService.apiKey
     },
     dataSrc: 'results'
     //type: 'GET',
     //headers: {"Authorization": 'Bearer ' + JSON.parse(localStorage.getItem('authUser'))["token"]}
   },
   columns: [
     { data: 'title' },
     { data: 'release_date' }
   ]
 };
}

getMostPopularMovies(){

 this.moviedbService.getMostPopularMovies().
   subscribe((movies: any) => {
     this.moviesList = movies.results;

     console.log("====", movies);   
   }, (error: any) => {
     console.error("Erro-> ", error);
 });
}

Спасибо, ребята o /

...