怎樣知道httpclient 發了資料給BACKEND 程式?

General
1

我寫一個login 程式。我試了BACKEND 程式是沒有問題，但是我怎樣去知道angular發出的資料，backend 程式，是否已經接收了?

以下是我的CODE:
userlogin()

{

const options = { responseType: 'text' as 'json'};

const logindata = new FormData();

const email = this.login.value.email;

const password = this.login.value.password;

console.log(this.login.value.email);

console.log(this.login.value.password);

this.http.post('http://127.0.0.1/library/login.php', {email, password}, options)

.pipe(

  catchError(error => of(error)),

  map(user => {

  console.log(user);

}));

thank you very much.

2

http client 在發出後
好像是需要使用subscribe來取得結果
EX:

this.http.get('xxx').pipe(...).subscribe(
    success => {  console.log(status 200 , 304 ... ? ) },
    error => { console.log(status 4xx 5xx ... ?)
);
1個讚
3

另外一個可以檢查的地方是瀏覽器的開發者工具->Netowrking，這邊也可以檢視發出的 xhr request 的內容

4

我根據你的方法去查找為麼不傳送資料去API，我在"開發者工具"->“Netowrking”-> “Preview"裏，我看見以下資料。
{websocket: true, origins: [”:"], cookie_needed: false, entropy: 1217316004}

這樣是否不能傳送資料去backend program?

thank you very much.

5

你應該要看到你呼叫 api 的那個相關的 request. 這個看起來不是打 API 的請求

6

是不是要用
const logindata = new FormData();
logindata.append(‘email’, this.login.value.email);
logindata.append(‘password’, this.login.value.password);
this.http.post(‘http://127.0.0.1/library/login.php’, logindata, options).subscribe(
apiuserdata => console.log(apiuserdata)
);
才能傳送data?

我在網上很多網頁都是用this.http.post(‘http://127.0.0.1/library/login.php’,{這裏的資料是不是要JSON格式?} , options)
thank you very much.

7

Angular 內的 httpClient post 預設是吃 json 格式，但也是要看後端吃怎樣格式的資料

我自己是這樣子寫就可以通了

const url = 'https://.....';
const postBody = {xx:123};
this.http.post(url, postbody).subscribe();
8

我是根據這個網頁去學做login 功能，可能它使用map 是不能存取資料，但是用你的方法就用可以。Thank you very much.

https://www.mtutorial.com/angular-login-logout-registration-example-php-api

9

我自己覺得用 reportProgress: true 應該比較安全，如果傳回來的http status = 200，那就確定backend有收到了。

    const req = new HttpRequest('post', url, data, {
        reportProgress: true,
      });    

    return this.http.request(req).pipe(
        map((event: HttpEvent<any>) => {
            return event
        })
    )
10

其實 httpClient 本身有針對 request 發生錯誤時有做些處理，相關文件連結如下

1個讚