Question

由于我是angular开发人员，因此我对back-end完全不熟悉。要测试我的api，我需要从angular发送ajax请求。告诉我该怎么做？有一个代码。必须先执行请求，然后再清除localeStorage。

<button (click)="logoutAndClose()" class="btn_green btn_ml" mat-raised-button>
  Log out
</button>

@Component({
  selector: 'app-logout-modal',
  templateUrl: './logout-modal.component.html',
  styleUrls: ['./logout-modal.component.scss']
})
export class LogoutModalComponent implements OnInit {

  constructor(public thisDialogRef: MatDialogRef<LogoutModalComponent>,
              private router: Router,
              private http: HttpClient,
              @Inject(MAT_DIALOG_DATA) public data: any) {
  }

  ngOnInit() {
  }
  logoutAndClose(): void {
    this.http.post("http://127.0.0.1:8001/api/v1/users/settings/logout/")
    localStorage.clear();
    this.thisDialogRef.close();
    this.router.navigateByUrl(RouteUrls.Login);
  }
}

Answer 1

作为最佳实践，您应该创建一个服务来发送HTTP请求：

$('#myTable').DataTable( {
   serverSide: true,
   ajax: {
    url:"product_fetchmulti.php",
    method:"POST",
    dataType:"json",
    success:function(data)
    {
        var html = '';
        for(var count = 0; count < data.length; count++)
        {
            html += '<tr>';
            html += '<td><input type="checkbox" id="'+data[count].product_id+'" data-name="'+data[count].product_name+'" data-product_sku="'+data[count].product_sku+'" data-product_status="'+data[count].product_status+'" data-product_quantity="'+data[count].product_quantity+'" data-product_color="'+data[count].product_color+'" class="check_box"  /></td>';
            html += '<td>'+data[count].product_name+'</td>';
            html += '<td>'+data[count].product_sku+'</td>';
            html += '<td>'+data[count].product_status+'</td>';
            html += '<td>'+data[count].product_quantity+'</td>';
            html += '<td>'+data[count].product_color+'</td></tr>';
        }
        $('tbody').html(html);
    }
    }
} );

然后您将可以在组件中使用内置的依赖项注入：

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

@Injectable()
export class YourService {
  private url: string = "http://api";
  private endpoint:string = "car";

  constructor(private http: HttpClient,
             ) { }


  get(id: number): Observable<Car> {
      return this.httpClient
          .get<Car>(`${this.url}/${this.endpoint}/${id}`)
          .pipe(map(data => data));
  }
}

更新：

为了执行您的http查询，您需要运行它。因此，您需要调用export class YourCarComponent { constructor(private yourService: YourService) { } getCars(id: number) { this.yourService.get(id) .subscribe(s=> console.log(s)); }方法：

subscribe

此外，作为最佳实践，不应包含http请求的实现详细信息，因为这并不代表观点。视图应该只显示数据。

Answer 2

您需要导入HTTPModule

@NgModule（{ 进口：[ BrowserModule， //在BrowserModule之后导入HttpClientModule。 HttpClientModule， ]
在构造函数中注入：

@Injectable（）导出类YourService { 构造函数（私有http：HttpClient）{} }
this.http.get（this.url）.subscribe（（data：CanBeDirectlyMapToJsonObject）=> { }）;

有关更多详细信息，请参见https://angular.io/guide/http

如何在角度6中发送ajax请求？

2 个答案: