Ax ios выдает ошибку: невозможно прочитать свойство '$ get' из неопределенного - PullRequest
Новая
       41

Ax ios выдает ошибку: невозможно прочитать свойство '$ get' из неопределенного

0 голосов
/ 28 апреля 2020

код github: https://github.com/aurora10/amazone-clone.git

Я пытаюсь использовать Ax ios для запуска API, но получаю ошибку:

Ошибка в консоли NUXT SSR: 

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" alt="">
        </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>

экспорт по умолчанию {asyn c asyncData ({$ axios}) {try {let response = await $ ax ios. $ get ("http://localhost: 3000 / api / products"); console.log (ответ); возврат {продукты: продукты}; } catch (err) {console.log (err); }}};

Я убедился, что он установлен. Я также включил 

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

  axios: {
    // proxyHeaders: false
  }
}

, как они говорят в руководстве по установке. Также пытался удалить $, прежде чем получить ... все та же ошибка в консоли :( Я понятия не имею, что еще может быть не так ..

Ответы [ 2 ]

1 голос
/ 29 апреля 2020

Похоже, вы не включили модуль ax ios, посмотрите процесс установки здесь 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
  }
0 голосов
/ 29 апреля 2020

Вот шаги для топор ios в Nuxt

  1. Убедитесь, что топор ios установлен npm install @nuxtjs/axios
  2. Добавить топор ios в nuxt.config. js
...
  axios: {
    // proxyHeaders: false
  }
...
Вам не нужно $ в $axios.$get. Это должно быть $axios.get()
...