Axios / Json for 循环，如何防止此错误？答案

【问题标题】：Axios / Json for loop, How can I prevent this error?Axios / Json for 循环，如何防止此错误？
【发布时间】：2020-12-16 08:49:10
【问题描述】：

我的部分代码是这样的，URL 在 for-loop 下。

    axios.get(Url).then((response) => {
      let getJsonAPI = response.data.data.products;
      if (response.data.data.products.length > 0) {
        state.jsonGetProductsAPI.push(getJsonAPI);
      }
    });

我收到此错误是因为响应不包含 products 属性

只有在“数据”树中有内容时，我才想推送 getJsonAPI。代码按预期工作，但有一个错误，我的强迫症不允许我继续该项目:(有什么想法吗？我是这个东西的新手

【问题讨论】：

标签： vue.js axios vuex

【解决方案1】：

您可以只使用optional chaining (?.) 语法。它是专门为像您这样的情况设计的，因此您可以将 a && a.b && a.b.c 替换为 a?.b?.c：

axios.get(Url).then((response) => {
  const products = response.data.data.products;
  if (products?.length) {
    state.jsonGetProductsAPI.push(products);
  }
});

如果在某些情况下响应不包含 data 属性，您也应该选择链接它：

const products = response.data.data?.products;

另外请注意，您不需要任何 polyfill，Vue 会为您转换（转换为 a && a.b && a.b.c 语法）。

【讨论】：

【解决方案2】：

这是因为 undefined.length 抛出错误。

if (response && response.data && response.data.data && 
    response.data.data.products && response.data.data.products.length) {
    state.jsonGetProductsAPI.push(getJsonAPI);
  }

这段代码不会抛出错误:)

【讨论】：

【解决方案3】：

您应该检查data 是否存在。如果您在方法的顶部进行所有数据检查并在那里进行救助（返回或任何其他可接受的内容），则会更容易。

axios.get(Url).then((response) => {
   if (!response.data || !response.data.data || !response.data.data.products) {
    return
   }

   // now you are sure that response.data.data.products is truthy

   let getJsonAPI = response.data.data.products;
   if (response.data.data.products.length > 0) {
     state.jsonGetProductsAPI.push(getJsonAPI);
   }
});

PS：不应该容忍错误，这不应该是强迫症的问题。

【讨论】：