如何避免在 Angular 4 上多次调用相同的 API？答案

【问题标题】：How to avoid same API Calls multiple times on Angular 4.?如何避免在 Angular 4 上多次调用相同的 API？
【发布时间】：2018-02-28 14:07:04
【问题描述】：

可以看出，当我在 Angular 4 上提交表单时，它会为一次调用进行 2 次调用。当我检查日志时，才知道它被击中了两次。我怎么能克服这个。？当我提交所有表单时，它会插入两次相同的表单数据

Component on project

Service I have Used

【问题讨论】：

我假设您收到一个 OPTIONS 请求，然后是实际请求。这是正确的行为。
同意@Chrillewoodz。如果不是这样，您应该发布请求的屏幕截图和生成它的代码，以便发现任何可能的问题。
好像是2次点击请求
显示一些代码，用于表单和关联的类，以便我们更好地帮助您。
我已经添加了我的代码截图请通过

标签： javascript angular rest api web-services

【解决方案1】：

正如Chrillewoodz 提到的，它可以是 OPTIONS 请求。这是某些浏览器发出的飞行前请求，作为一种安全措施，以确保正在完成的请求受到服务器的信任。你不能禁用它。
如果不是 OPTIONS 请求，请确保“提交”按钮上没有“点击”事件，表单本身没有“ngSubmit”。像这样：

【讨论】：

【解决方案2】：

你可以通过创建一个布尔变量 apiCalled 来解决它，如果它是 false，请不要调用你的 api，否则调用它

@Injectable()
export default class myService {
    apiCalled: boolean = false;
    consturctor(private Http _http){

    }
    callApi() {
        if(apiCall)
            return;
        else {
            this.apiCall = true;
            this._http.get("write url").subscripe(
                res => {

                }, err => {
                }, ()=> {
                    this.apiCall = false;
                } 
            )
        }
    }
}

一旦他调用完 api，你就可以再次调用该 api

【讨论】：

似乎只在函数上调用了一次，却让api调用了两次..太混乱了
不应该这样做顺便说一句我编辑了我的解决方案检查它并添加完整的方法
'(complete: any) => void' 类型的参数不能分配给'() => void' 类型的参数。问题的原因可能是什么..？
发生这种情况是因为完整的功能不需要任何参数我编辑了我的解决方案你可以检查一下
gotoSubmit(){ return this.serviceAPI .callApi(this.model.selctedList, .subscribe(respo => { //alert("res"); }); } 我所做的更改组件部分，这里使用的是 subscibe。？