ionic4 页面初始化时，调用多个api，失败后弹出多个弹框，用户体验不好，如何做到只弹出一次？

Question

ionic4 页面初始化时，
调用多个api，api失败后弹出多个弹框，用户体验非常不好，希望多个api请求时失败只弹出一次弹框，求大神赐教！谢谢！感恩。

以下关键的代码

//api封装
public get(data) {
    return this.http.get(data.url + '?' + this.toQueryString(data.data))
        .toPromise()
        .then(response => this.handleSuccess(response))
        .catch(error => this.handleError(error))
}

//返回错误
private handleError(error: Response | any) {
    this.presentAlert();
    return error;
}


//弹框定义
async presentAlert() {
    const alert = await this.alertController.create({
      header: '提示',
      message: '数据加载失败,请稍后再试',
      buttons: ['确认'],
      mode:"ios",
    });
    await alert.present();
}

Answer 1

参照函数去抖来实现调用 节流与去抖
使用 该npm包可以实现throttle-debounce
使用 debounce 如果 在约定的时间内多次调用 会只跑最后一次（比如说 0.5s）

注意：
如果多个 http使用同一个 错误处理也只会出现一个，建议根据 url不同 来添加 去抖 函数
同时，如果配置时间过长，因为去抖函数 只会做最后一次，所以显示后置。不友好。但是够用了。
建议根据这两个函数，可以适当封装适配自己业务。