Question

我在Ionic项目中工作，API被调用了2次。我不知道为什么我的API被调用2次。

这是我的 productdetails.html ：

<ion-col *ngIf="hassizenot && product.out_of_stock == 0" style="padding: 0px;">
      <button class="mybtn11" (click)="addtocartnew(product)" ion-button small>
        Add to Cart
      </button>
</ion-col>

这是我的 productdetails.ts ：

addtocartnew(detailsp)
{
this.storage.get("ID").then((val) =>
    {
      if(val)
      { 
        if(detailsp.SelectedSize)
        {
          let usercartnewdetails = {
            user_id: val,
            product_id: detailsp.id,
            size: detailsp.SelectedSize,
          };
          this.restProvider.usercartproducts(usercartnewdetails, 'user_cart/'+detailsp.id+'/'+val+'/'+detailsp.SelectedSize).subscribe((data) => {
            if (data) {
              console.log("One");
              this.responseEdit = data;
              console.log(this.responseEdit.msg);
              if (this.responseEdit.status === 'success') {
                this.presentToast(detailsp.product_name);
              }
              else{
                this.presentToasterror();
              }
            }
          });
        }
        else
        {
          let usercartnewdetails = {
            user_id: val,
            product_id: detailsp.id,
          };
          this.restProvider.usercartproducts(usercartnewdetails, 'user_cart/'+detailsp.id+'/'+val).subscribe((data) => {
            if (data) {
              console.log("Two");
              this.responseEdit = data;
              console.log(this.responseEdit.msg);
              if (this.responseEdit.status === 'success') {
                this.presentToast(detailsp.product_name);
              }
              else{
                this.presentToasterror();
              }
            }
          });
        }
      }
    });
}

这是我的服务：

usercartproducts(credentials, type) {
  var headers = new HttpHeaders();
  headers.append('Access-Control-Allow-Origin' , '*');
  headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
  headers.append('Accept','application/json');
  headers.append('Content-Type','application/json');
  headers.append('Access-Control-Allow-Credentials','true');
  headers.append('Access-Control-Allow-Headers','Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With');

  return this.http.post(apiUrl + type, credentials, {headers: headers});
}

在我的ts文件中，我正在运行用于将产品添加到购物车的API，它在控制台中仅显示一个响应，但是它调用了2次，因为它添加了2倍的产品并在网络中chrome，它调用了2次。

非常感谢您的帮助。

Answer 1

只需在您的服务中尝试一下：

usercartproducts(credentials, type) {
  var headers = new HttpHeaders();
  headers.append('Access-Control-Allow-Origin' , '*');
  headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
  headers.append('Accept','application/json');
  headers.append('Content-Type','application/x-www-form-urlencoded');
  headers.append('Access-Control-Allow-Credentials','true');
  headers.append('Access-Control-Allow-Headers','Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With');

  let v = new FormData();
  for(var k in credentials)v.append(k,credentials[k]);
  return this.http.post(apiUrl + type, v, {headers: headers});
}

这解决了我的问题。

Answer 2

因为您两次实施了API，并且您的 If 条件一定是错误的像这样改变你的ts。

 addtocartnew(detailsp) {
     if (detailsp.SelectedSize) {
       this.storage.get("ID").then((val) => {
         if (val) {

        let usercartnewdetails = {
          user_id: val,
          product_id: detailsp.id,
          size: detailsp.SelectedSize,
        };
        this.restProvider.usercartproducts(usercartnewdetails, 'user_cart/' + 
        detailsp.id + '/' + val + '/' + detailsp.SelectedSize).subscribe((data) => {
           console.log("One");
           this.responseEdit = data;
           console.log(this.responseEdit.msg);
           if (this.responseEdit.status === 'success') {
            this.presentToast(detailsp.product_name);
           }
           else {
             this.presentToasterror();
           }
         }
       });
     }
   })
 }
 else {
   this.storage.get("ID").then((val) => {
     if (val) {
       let usercartnewdetails = {
         user_id: val,
         product_id: detailsp.id,
       };
       this.restProvider.usercartproducts(usercartnewdetails, 'user_cart/' + 
       detailsp.id + '/' + val).subscribe((data) => {
         if (data) {
           console.log("Two");
           this.responseEdit = data;
           console.log(this.responseEdit.msg);
           if (this.responseEdit.status === 'success') {
             this.presentToast(detailsp.product_name);
           }
           else {
             this.presentToasterror();
           }
         }
       });
     }
   })
 }
}

根据您的条件进行更改，它将起作用。

我的API在Ionic中被调用了2次

2 个答案: