rxjs / ajax response Невозможно назначить только для чтения свойство 'taskData' объекта '[object Object]' - PullRequest
Новая
       3

rxjs / ajax response Невозможно назначить только для чтения свойство 'taskData' объекта '[object Object]'

0 голосов
/ 26 марта 2020

В приложении angular я создал службу, которая извлекает объект json из бэкэнда через GET.

Когда я использую этот fetch кодовый блок, все работает нормально: 

fetchNode(nodePath: string): Promise<CrxApiNode> {
const {token} = this.authInfo$;
return fetch(`${nodesUrl}?path=${encodeURIComponent(nodePath)}`,
  {
    method: 'GET',
    headers: {
      Authorization: `Bearer ${token}`,
      Accept: 'application/json; charset=utf-8'
    }
  }
).then(res => {
    return res.json();
}).catch(e => {
  console.log('error');
});

}

При выполнении того же запроса с rxjs / ajax: 

  loadNode(nodePath: string): Observable<CrxApiNode> {
const {token} = this.authInfo$;
  // this leads to the error
return ajax.getJSON(`${nodesUrl}?path=${encodeURIComponent(nodePath)}`, {
  Authorization: `Bearer ${token}`,
  Accept: 'application/json; charset=utf-8'
}).pipe(
  map(node => {
    return node;
  }),
  catchError(error => {
    // here the error occurs: Cannot assign to read only property 'taskData' of object '[object Object]'
    console.log('error: ', error);
    return of(error);
  }));

}

Я получаю ошибку (выдается ajax (...): 

"TypeError: Cannot assign to read only property 'taskData' of object '[object Object]'
at XMLHttpRequest.addEventListener (http://localhost:4200/polyfills.js:1939:39)
at XMLHttpRequest.desc.set [as ontimeout] (http://localhost:4200/polyfills.js:1292:24)
at AjaxSubscriber.setupEvents (http://localhost:4200/vendor.js:78731:23)
at AjaxSubscriber.send (http://localhost:4200/vendor.js:78652:18)
at new AjaxSubscriber (http://localhost:4200/vendor.js:78634:14)
at AjaxObservable._subscribe (http://localhost:4200/vendor.js:78605:16)
at AjaxObservable._trySubscribe (http://localhost:4200/vendor.js:77010:25)
at AjaxObservable.subscribe (http://localhost:4200/vendor.js:76996:22)
at MapOperator.call (http://localhost:4200/vendor.js:82439:23)
at Observable.subscribe (http://localhost:4200/vendor.js:76991:31)"
enter code here

Так как я довольно плохо знаком с rx js Я пытаюсь проанализировать ошибку - в чем здесь разница и почему вариант rx js не работает как положено?

1 Ответ

0 голосов
/ 26 марта 2020

В первом примере вы ловите ошибку и регистрируете ее. В результате ошибка теперь "исчезла".

Во втором примере вы также фиксируете ошибку, регистрируете ее также, но затем ошибка происходит. «catchError» перехватит ошибку из потока и вернет новое значение (не ошибку) в поток. Причина в том, что теперь вы можете перехватить ошибку и заменить ее значением по умолчанию, чтобы обработать ошибку как можно более плавно для пользователя.

В результате ваш поток теперь выдает Объект ошибки. Не обрабатывая это как ошибку. Я предполагаю, что где-то позже вы вызываете "myEmitedValue.taskData". Но «myEmitedValue» - это не JSON из вашего внутреннего вызова, а объект ошибки. Поэтому нет никаких «taskData».

Если вы хотите «перебросить» ошибку, вы можете вместо этого 

return throwError(err)

Я создал стек-блиц с несколькими примерами .

...