类型错误:无法读取 Vue.js axios API 调用的未定义属性“map”

时间:2021-07-15 01:28:17

标签: javascript vue.js vuejs2 axios

我试图从远程 URL 调用数据源,但总是收到此错误 TypeError: Cannot read property 'map' of undefined。 axios 方法封装在 axios.js 中:

.....
result = new Promise((resolve, reject) => {
      axios.get(url)
        .then((response) => {
          const processedData = response.data.response.map((v) => {
            return v;
          })
          resolve(processedData);
        }).catch((error) => {
          if(typeof(error) == 'object'){
            alert(error) // @@@ I ALWAYS LAND HERE
          }
          reject(error.data); 
        });
    });
 ....

我已经在我的网络控制台中确认我尝试访问的 API url 工作正常,并且可以看到所有数据。 API格式如下:

[
    {
        "id": 1,
        "name": "alpha",
        "build_id": 50,
        "app_env_names": "",
        "app_env_list": [
            ""
        ],
    },
    {
        "id": 2,
        "name": "feature/OPS-05",
        "build_id": 48,
        "image_tag": "feature_DEVOPS-605-jasc-cr-approval-test-71496674-48",
        "app_env_names": "dev",
        "app_env_list": [
            "dev"
        ],
       .....

我尝试删除地图,但它不起作用。有谁知道解决这个问题的方法?谢谢!

1 个答案:

答案 0 :(得分:-1)

更新:不要参考该行下方的代码。这显然是我不知道的承诺构造反模式。因此可能无法处理某些边缘情况。

改用 response = axios.get(url).then(({ data }) => data)

================================================ ==================

在我发布这个问题后几秒钟就发现了哈哈(& 正如@Phil 指出的那样)。由于调用中没有 response,只需将其删除即可:

result = new Promise((resolve, reject) => {
        axios.get(url)
          .then((response) => {
            const processedData = response.data.map((v) => {
              return v;
            })
            resolve(processedData);
          }).catch((error) => {
            if(typeof(error) == 'object'){
              alert(error)
            }
            reject(error.data);
          });
      });