axios / Json for 循环，如何防止这个错误？

Question

我的部分代码是这样的，URL 在 for 循环下。

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

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

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

Answer 1

发生这种情况是因为 undefined.length 抛出错误。

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

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

Answer 2

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

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：不能容忍错误，应该不是强迫症的问题

Answer 3

您可以只使用 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 语法）。

axios / Json for 循环，如何防止这个错误？

Axios / Json for loop, How can I prevent this error?

vue.js

axios

vuex