使用攔截器在離子應用程序中處理離線數據

Question

因此，有一點背景知識，我有這個項目，並且正在處理版本2，其中涉及添加離線功能。我堅持以下堆棧正在改變這將涉及到的開銷：

Laravel API MYSQL 離子

我聽到了很多關於使用袋/ CouchDB的同步，但不幸的是，我不能改變一切使用這個堆棧。

我決定在我有限的AngularJS/JS知識中使用HTTP攔截器攔截所有請求，檢查它是否爲POST/PUT請求，檢查設備是否處於脫機狀態並將數據保存在本地存儲中或繼續進行請求。這是問題開始的地方。

這裏是我的APIInterceptor：

App.factory('APIInterceptor', function ($q) { 

    return { 
     request: function (config) { 

      if(config.method == 'POST' || config.method == 'PUT') 
      { 
       //Add data to localstorage 

       //Exit without actually sending the request to the server. 
       return $q.reject(); 
      } 

      return config || $q.when(config); 
     } 
    }; 
}); 

正如你可以看到我回來.reject()但我需要的是模仿API響應和請求是否成功處理，所以我的應用程序可以傳回給我的服務正常進行。數據存儲在localstorage中後，基本上返回成功，狀態碼200。

有關我如何做到這一點的任何建議？

Answer 1

在管理所有http請求並最終返回數據庫數據的情況下創建服務會不會更容易？

Interceptors

對於全球錯誤處理，認證，或任何種類的請求 同步或異步預處理或 後處理的反應的目的，是希望能夠之前攔截 請求他們被交給服務器並在 之前被回覆給發起這些請求的應用程序代碼。攔截器利用承諾API來滿足對同步和異步預處理的這種需求。

我想你不需要檢查設備是否在線/離線，因爲你會在攔截器中獲得requestError。

既然你要攔截通信之前，它實際上發生了，你可以使用這種攔截器：如果請求是POST或PUT

.factory('APIInterceptor', function APIInterceptor($q) { 
    return { 
      request: function (config) { 
       if(config.method == 'POST' || config.method == 'PUT') 
       { 
        return $q.reject({status: 503, config: config}); 
       } 
       return config || $q.when(config); 
      }, 

      // response: function (httpResponse) 
      // { 
      //  return httpResponse || $q.when(httpResponse); 
      // }, 

      responseError: function (rejection) 
      { 
       if (rejection.status === 503) { 
        rejection.status = 200; 
        rejection.statusText = "OK"; 
        rejection.data = {}; 
        return $q.resolve(rejection); 
       } 
       return $q.reject(rejection); 
      } 
     }; 
}); 

你可以拒絕它添加一個狀態和傳球配置以及：

if(config.method == 'POST' || config.method == 'PUT') 
{ 
    return $q.reject({status: 503, config: config}); 
} 

responseError將被處理。
現在，您可以查看您的狀態和解決的承諾，使您的通話$http沒有捕獲異常：

if (rejection.status === 503) { 
    rejection.status = 200; 
    rejection.statusText = "OK"; 
    rejection.data = {}; 
    return $q.resolve(rejection); 
} 

我已經附上了data對象的原因這是你的HTTP調用可能會發生什麼。 基本上，我們在這裏做的是試圖重建一個適當的迴應。