Вызов API не происходит при вызове Http Request с использованием HttpClient в angular 7 - PullRequest
Новая
       7

Вызов API не происходит при вызове Http Request с использованием HttpClient в angular 7

0 голосов
/ 21 января 2019

Я преобразую запрос post API, написанный в javascript, в typescript, но мой новый код, похоже, не работает, так как я не вижу сетевых вызовов в отладчике. Пожалуйста, найдите мои фрагменты кода ниже.

javascript (рабочий) 

private resourcesAccessable(url, token, clientId, resources) {

    var request = new XMLHttpRequest();
    request.open('POST', url, false);
    request.setRequestHeader("Authorization", "Bearer " + token);
   request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    console.log(request);
    var response ;
    request.onreadystatechange = function () {
        if (request.readyState == 4) {
            var status = request.status;
            if (status >= 200 && status < 300) {
                response = JSON.parse(request.responseText);
            } else if (status == 403) {
                console.log('Authorization request was denied by the server.');
                return null;
            } else {
                console.log('Could not obtain authorization data from server.');
                return null;
            }
        }
    }
    var params = "grant_type=urn:ietf:params:oauth:grant-type:uma-ticket&response_mode=permissions&audience="+clientId;
    if(Array.isArray(resources)){
        for (var i = 0; i < resources.length; i++) {
            params = params+"&permission="+resources[i]
        }
    }
    request.send(params);
    console.log(response);
    return response;
}

typescript (не работает) 

resourcesAccessable(url, token, clientId, resources) {
private http: HttpClient,
private payload

const httpOptions = {
    headers: new HttpHeaders({
    'Content-Type': 'application/x-www-form-urlencoded',
    'Authorization': 'Bearer ' + token
    })
};

this.payload = new URLSearchParams();
this.payload.set('grant_type','urn:ietf:params:oauth:grant-type:uma-ticket');
this.payload.set('response_mode','permissions');
this.payload.set('audience', clientId);
this.payload.set('permission',resources);

return this.http.post(url, payload.toString(), httpOptions)
    .pipe(
        tap(
            (data) => {
                console.log('----->>>', data);
            }
        )
    ), error => {
        console.log('error ' + JSON.stringify(error));
    };
}

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

1 Ответ

0 голосов
/ 21 января 2019

Разделите ваш код на следующие разделы. Angular / RxJS отличается от ванильного JavaScript. Вы создаете наблюдаемые http-вызовы, которые затем читает абонент.

Добавление HttpClient в ваш класс - необходимо для работы http-вызовов. (Требуются дополнительные зависимости для работы. Пожалуйста, обратитесь https://angular.io/guide/http)

constructor(protected http: HttpClient) {}

Определение функции 

 resourcesAccessable(url, token, clientId, resources): Observable<any> {
    const payload = new URLSearchParams()

    const httpOptions = {
        headers: new HttpHeaders({
        'Content-Type': 'application/x-www-form-urlencoded',
        'Authorization': 'Bearer ' + token
        })
    }

    payload.set('grant_type', 'urn:ietf:params:oauth:grant-type:uma-ticket')
    payload.set('response_mode', 'permissions')
    payload.set('audience', clientId)
    payload.set('permission', resources)

    return this.http.post(url, payload.toString(), httpOptions)

  }

вызов функции 

  this.resourcesAccessable('', '', '', '')
        .subscribe(
          (data) => {
            console.log('----->>>', data);
          }
        , error => {
            console.log('error ' + JSON.stringify(error));
        }, 
         () => console.log('Completed'));
...