バックエンドのリターンは、に対処する方法のフロントエンドをゼロ？トレラントデータフォールト - オーバー自信を持っていない外部データの操作を行い

シーン

開発プロセスにおいて、我々は、データは常にときに、エラーオブジェクトのプロパティを取得するための方法を使用して、又はアレイで、その結果、理由が発生するからです。

xxxはfuctionのではありません

未定義のプロパティXXXXを読み取ることができません。

我々は通常、ページが正常に開くことができるように、いくつかのフォールトトレラント処理を行うので、そのため、これらのエラーのために、それは、開いていないページに直接つながります。たとえば、次の&&、三項演算子、時々はハンドルに文を参照しても。

一般的な方法

1  // インターフェースからの応答データ
2 CONST応答= { 
 3。      コード：200である、 
 4。      MSG： 'メッセージ' 、 
 5。     データ：{ 
 6          合計：100 、 
 7          ページ:. 1 、 
 8。          のpageSize：10 、 
 9。         コンテンツ：[] 
 10      }
 11  }
 12は、 
13である CONST goodsList response.data.content.forEach =（（）=> {}）
 14 CONST =総response.data.total

このデータ、コンテンツの特性とのforEachを与えられていないことを保証するためには、そうすることができます

1 CONST goodsList = response.data && response.data.content && response.data.content.forEach（（）=> {}）
 2 CONST合計= response.data && response.data.total

これは、初期データのフォールトトレランス、冗長性を完了したが、コードはあまりにも貧弱可読性で、合計値はおそらくブールタイプになります。

シンプルな改善

2つだけの単純な処理は、解体され、デフォルト値がにあります

1 CONST {データ= {}} = 応答
 2 CONST {constent = []、合計= []} = データ
 3 goodsList.forEach（（）=> {}）

解体は、コードデータとフラットの可読性を向上させる必要があります

しかし、しかし、ここで新たな問題があります。今回私はこのようなデータを見て取得する場合：

1つの CONST応答= {
 2つの      データ：ヌル
3 }

その後、エラーを分解意志することができないのプロパティdestructure content 「未定義」や「NULL」の

条件の発効のデフォルト値は未定義正確に等しく、そのオブジェクトのプロパティ値です

厳密に同じではない、それは有効になりませんデフォルト値{}につながる、有効な割り当てであるため、上記のコードでは、属性データがnull、nullに等しいと定義されていません。実際には、以下のようになりました。

1 CONST {constent = []、合計= []} = NULL

我々はそのデータを確実にするために持っているので、そうでない場合は、上記のコードは意味をヌルに存在することはできません。

さらなる改善

あなたは、バックエンドにしたいと本当にリターンヌルに同じように合意されたかもしれません

しかし、条約の後を含まないオーバー自信を持って、外部データ、

実際に、この場合にはパッケージがaxiosとき、またはデータ値をフィルタリングするために、フィルタにインタフェースからデータを取得するために、フィルタリング機能が追加された、フェッチすることができることはヌルである、またはNULLデータが未定義再割り当てすることです。

以下は、データフィルタ機能です

1  // 取得したデータを濾過した上
2 CONST = replaceNull（OBJ）=> {
 3      用（LETキーでOBJ）{
 4          スイッチ（Object.prototype.toString.call（OBJ [キー]）。スライス（8、 -1 ））{
 5。             ケース 'オブジェクト' ： 
 6。                 replaceNull（OBJ [キー]）
 7。                 BREAK ;
 8。             ケース 'アレイ' ： 
 9。                 ための（I = 0せ; I <OBJ [キー] .LENGTH; I ++ ）{
 10                      replaceNull （OBJ [キー] [I]）
 。11                  }
 12は                 BREAK 。
13              デフォルト：
 14                  であれば（OBJ [キー] === ヌル）OBJ [キー] = 未定義。
15          }
 16      }
 17 }

濾過後、このとき、このようなアプローチに、問題はありません

1 CONST {データ= {}} = 応答
 2 CONST {constent = []、合計= []} = データ
 3 goodsList.forEach（（）=> {}）

あなたは中間層としてノードを持っている場合はもちろん、層は、解体のフロントエンドビューは安全なgraphQlそのデフォルト値を、使用することができます。

結論

フロントエンドフォールトトレラントデータ処理が必要とされ、外部データの形式は、あなたが望むものであると予想することはできません。私は通常に対処する方法がわかりません。