Angular 7处理http请求

我无法让一个简单的http调用正常工作

我来自angularjs和AFAIK。然后=。订阅

所以我的问题是，我可以不在auth服务中使用.subscribe，而是在login.component.ts中使用它，并且我还想获得Http状态

认证服务

更新：

下面是我的angularjs代码的样子

认证服务

login.ctrl

subscribe与Promise中的then方法不同。您只需要返回http.post的结果，它是可观察对象，然后在组件中订阅可观察对象

如果您想捕获错误，请在服务中链接catch方法

auth.service.ts

签名用户：用户{ 常量url=`${this.mainUrl}/sign_in`； 返回this.http.postrl、user、httpOptions 管 tapval=>console.logval，//使用val执行您想要的操作 catchErrorerror=>console.logerror } login.component.ts

this.authService.signIn.subscribeuserData=>{ //执行login.ctrl中的操作 };

---

很接近，但您应该对service.ts进行以下修改。如果您打算使用所需的RxJS操作符，请不要忘记导入它们，例如管道和贴图

import { catchError, map, tap } from 'rxjs/operators';

signIn(user: User) {
  const url = `${this.mainUrl}/sign_in`;
  return this.http.post<any>(url, user, httpOptions).pipe(
    // additional operations before returning observable
    //map(data => ....), 
    //catchError(this.handleError('signIn', []))
  );
 }

编辑：如果要读取完整的响应正文，可以使用“观察”选项

RxJs可观测

    signIn(user){
        return this.httpClient.post<any>(url, user, option)
            .pipe(
            map(res => res),
            retry(1),
            catchError(err => throwError(err))
            )
    }

---

我尝试了这个，它在catch上抛出了一个错误，说“catch”不存在。第二个是我想在我的服务中获取请求的值。谢谢，这就像我在angularjs中所做的那样，但我仍然有一个问题，就是只获取jwt令牌如何获取http代码状态？嘿，只是为了检查一下，您指的是成功获取HTTP代码状态还是错误？我指的是成功。。对于成功来说，不是总是代码200吗？隐马尔可夫模型。。让我想想。。如果我在这里遗漏了什么。如果您真的想访问响应主体状态代码、状态文本等，即使是成功响应，您也需要向http.post方法传递一个额外的可选参数。让我更新我的答案！

function signIn(data) {
        return $http.post(url + '/api/v1/sign_in_2', data)
            .then(success)
            .catch(fail);

        function success(response) {
            setToken(response.data.jwt);
            return response;
        }

        function fail(e) {
            return e;
        }
    }

vm.doLogin = function (userData) {
  vm.spinner = true;
  elixirAuthServices.signIn(userData).then(function (data) {

    if (data.status === 200 || data.status === 201) {
      elixirAuthServices.getUser().then(function (data) {
        vm.user_id = data.data.id;
        redirect();
      });
    } else {
      vm.authenticateErr = true;
      vm.spinner = false;
      logger.info('Username or Password is incorrect');
    }

  });
};

import { catchError, map, tap } from 'rxjs/operators';

signIn(user: User) {
  const url = `${this.mainUrl}/sign_in`;
  return this.http.post<any>(url, user, httpOptions).pipe(
    // additional operations before returning observable
    //map(data => ....), 
    //catchError(this.handleError('signIn', []))
  );
 }

this.authService.signIn(userData).subscribe(success => {
   // next
   // .. handle successful response (status code 200)
}, error => {
   // handle errors
   console.log(error.status)
}, () => {
   // complete 
})

this.http.post<any>(url, user, { observe: 'response' }).pipe(
    //additional operations before returning observable
    //tap(response => console.log(response.status)
    //map(response => response.body), 
    //catchError(this.handleError('signIn', []))
  );

    signIn(user){
        return this.httpClient.post<any>(url, user, option)
            .pipe(
            map(res => res),
            retry(1),
            catchError(err => throwError(err))
            )
    }

   this.authService.signIn(userData).subscribe(res => {
       // do something here
       }, err => {
       // catch err here 
       }
       )