获取状态码http.get响应 angular2

Question

我需要获取以下http调用的状态代码并将其作为字符串返回

//This method must return the status of the http response
confirmEmail(mailToken):Observable<String>{

     return this.http.get(this.baseUrl+"users/activate?mailToken="+mailToken)
                     .map(this.extractData)
                     .catch(this.handleError);

}

谢谢！

Answer 1

添加 Angular >= 4.3（包括 15）版本的答案，并用新的

HttpClient

替换

http

在 Angular 4.3 及更高版本中，引入了 HttpClient 模块，它是旧 Http 模块的改进版本。它允许更轻松地访问 HTTP 响应，包括状态代码和标头。

以下是如何使用它的示例：

在您的模块中，导入 HttpClientModule:

import { HttpClientModule } from '@angular/common/http'; 
// Notice it is imported from @angular/common/http instead of @angular/http

在您的组件中（如果您只关心如何访问状态，请检查 console.logs）：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  private baseUrl = 'http://example.com/api/';

  constructor(private http: HttpClient) {
    this.activateUser('mailToken123');
  }

  activateUser(mailToken: string) {
    this.http.get(
      `${this.baseUrl}users/activate?mailToken=${mailToken}`,
      { observe: 'response' }
    )
    .subscribe(response => {
      // Access the status code
      console.log(response.status);
      
      // Access a specific header
      console.log(response.headers.get('X-Custom-Header'));
    });
  }
}

正如 @Rbk 的评论中所指出的，在请求配置对象中传递的observe: 'response' 选项是获取完整响应对象的关键，其中包括状态代码和标头。

请注意，由于浏览器的同源策略和服务器的 Access-Control-Allow-Headers 设置，并非所有标头都可以访问。除非满足两个条件，否则您可能无法检索某些标头。

更多信息，可以参考Angular官方HttpClient文档。

Answer 2

只需按以下方式修改您的代码即可将您的响应状态存储在字段中：

responseStatus: number;

//This method must return the status of the http response
confirmEmail(mailToken):Observable<String> {
//Edited for working with HttpClient on Angular >= 4.3
  return this.http.get(this.baseUrl+"users/activate?mailToken="+mailToken, {observe: 'response'})
                 .map((response: Response) => {
                   this.responseStatus = response.status;
                   return this.extractData(response);
                 }
                 .catch(this.handleError);

}

然后将其显示在您的组件 HTML 模板中：

<p class='responseStatus'>{{responseStatus}}</p>

Answer 3

这是代码：

http.get(
   '${this.baseUrl}users/activate?mailToken=${mailToken}',
    {observe: 'response'}
).subscribe(response => {

}, error => {
      // You can access status:
      console.log(error.status);
});

上面的代码调用实例的

subscribe()

方法，然后在

error

通知中获取状态。

Answer 4

很简单！！

在 extractData 函数内部

extractData (res){
//res.status  will be your status code
// res.statusText  will be your status Text
}

Answer 5

    confirmEmail(mailToken):Observable<String> {
   return this.http.get(this.baseUrl+"users/activate?mailToken="+mailToken)
     .pipe(map(data => {
       return data.httpStatus
         }));
     .catch(this.handleError);
}

希望这能解决您的问题。

Answer 6

如果您使用 HttpClient，这里是一个示例：

this.http.post(myRequest, body, { headers : myHeaders, observe: 'response' }).subscribe(
  data => {
    console.warn(JSON.stringify(data, null, 2));
  },
  error => {
    console.error(error.errorMessage);
});
    

Answer 7

    `import { HttpClient } from "@angular/common/http";


constructor(
    private httpClient: HttpClient){}
    
    this.httpClient.get<any>(this.API_URL, {observe: 'response'})
            .subscribe({
              next: (res) => {
    console.error(res.status)  // api status in header
    console.error(res.body) // response from api
    }
    })`

get 方法中的

{observe: 'response'} 给出完整的响应对象