axios报错：Cannot read property '$get' of undefined

Posted 2023-03-28

【中文标题】axios报错：Cannot read property \'$get\' of undefined

【英文标题】：Axios gives an error: Cannot read property '$get' of undefinedaxios报错：Cannot read property '$get' of undefined

【发布时间】：2020-08-12 14:49:58

【问题描述】：

github代码：https://github.com/aurora10/amazone-clone.git

我尝试使用 Axios 访问 API 但出现错误：

控制台中的错误是NUXT s-s-r：

TypeError: Cannot read property '$get' of undefined
at asyncData (pages/index.js:98:35)
at promisify (server.js:1898:15)
at Promise.all.Components.map.Component (server.js:1573:82)
at Array.map (<anonymous>)
at module.exports../.nuxt/server.js.__webpack_exports__.default (server.js:1569:51)

我就是这样尝试的：

export default 

async asyncData( $axios ) 
  try 
    let response = await $axios.$get("http://localhost:3000/api/products");
    console.log(response);
    return 
      products: response.products
    ;
  catch (err) 

    console.log(err);

  

API 本身有效。如果我从浏览器调用它 - 它会给我产品列表。 我究竟做错了什么？

完整的填充：

<template>

<div class="container-fluid browsing-history">
  <div class="row">


    <div class="col-sm-8 col-8">

      <h1 class="a-size-large a-spacing-none a-text-normal">All products</h1>
      <div class="a-spacing-large"></div>

      <a href="#" class="a-button-buy-again">Add new product</a>
      <a href="#" class="a-button-history margin-right-10">Add new category</a>
      <a href="#" class="a-button-buy-again margin-right-10">Add new owner</a>
    </div>
  </div>
</div>
<div class="a-spacing-large"></div>

<div class="container-fluid browsing-history">
  <div class="row">
    <div class="col-xl-2 col-lg-2 col-md-3 col-sm-6 col-6 br bb">

      <div class="history-box">
        <!--          product page-->
        <a href="#" class="a-link-normal">
          <img src="" class="img-fluid" >
        </a>

        <div class="a-spacing-top-base asin-title">
        <span class="a-text-normal">
          <div class="p13n-sc-truncated">Title </div>
        </span>
        </div>

        <div class="a-row">
          <a href="#">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
          </a>
          <span class="a-letter-space"></span>
          <span class="a-color-tertiary a-size-small asin-reviews">(1732)</span>
        </div>
      </div>
      <!--price-->
      <div class="a-row">
        <span class="p13-sc-price">$25</span>
      </div>
      <!--byttons-->
      <div class="a-row">
        <a href="#" class="a-button-history margin-right-10">Update</a>
        <a href="#" class="a-button-history margin-right-10">Delete</a>
      </div>
    </div>
  </div>
</div>

导出默认 异步异步数据（$axios） 尝试 让响应 = 等待 $axios.$get("http://localhost:3000/api/products"); 控制台日志（响应）； 返回 产品：产品 ; 捕捉（错误） 控制台日志（错误）； ;

我确实确保它已安装。我也包括了

module.exports = 
  modules: [
    '@nuxtjs/axios',
  ],

  axios: 
    // proxyHeaders: false
  

就像他们在安装手册中所说的那样。还尝试在获取之前删除 $...在控制台中仍然出现相同的错误:(我不知道还有什么可能是错误的..

【问题讨论】：

asyncData 在哪里被调用？您可能会不小心多次调用它，并且它传递了一个未定义的值

它只在 index.vue 文件中被调用。我唯一使用它的地方。见上文。

您可以尝试再次添加文件吗？有点难读

这个网站没有正确解析代码。我来得太乱了:(pastebin.pl/view/e944f92f

你能提供你的 nuxt.config.js 文件吗？

【参考方案1】：

好像你没有包含axios模块，看这里的安装过程https://axios.nuxtjs.org/setup.html#install

然后，您的配置在导出默认值中应如下所示

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://bootstrap-vue.js.org
    'bootstrap-vue/nuxt',
    '@nuxtjs/axios'
  ],

  axios: 
    // proxyHeaders: false
  

【参考方案2】：

这里是axios in Nuxt的步骤

确保已安装 axios npm install @nuxtjs/axios 在 nuxt.config.js 中添加 axios

...
  axios: 
    // proxyHeaders: false
  
...

您不需要$axios.$get 中的$。应该是$axios.get()

【讨论】：

@PinPiguin 你在你的代码中添加了吗？你检查了所有 3 个步骤吗？

是的：github.com/aurora10/amazone-clone/blob/master/admin/…

@PinPiguin 查看我的更新答案，您需要将其添加到导出默认值中