Ajax调用返回undefined

时间:2017-09-11 19:50:57

标签: ajax api reactjs

我正在尝试进行API调用,而Ajax的以下错误不是函数:

import $ from 'jquery';

const apiCall = function () {
  var url = 'https://images.nasa.gov/#/search-results';

  var request = {
    q: 'sun',
    media_type: 'image'
  };

  var result = $.ajax({
    url: url,
    dataType: 'json',
    data: request,
    type: 'GET'
  })
  .done(function() {
    alert(JSON.stringify(result));
  })
  .fail(function() {
    alert('failed');
  })
}

module.exports = apiCall;

我在另一个模块中导入上面的内容,并在反应的render()函数中点击按钮调用它,如:

import apiCall from './../api/apiCall';

class Gallery extends React.Component {
  render () {
    return (
      <section id="gallery" className="g-site-container gallery">
        <div className="grid grid--full">
          <div className="gallery__intro">
                <Button extraClass=""
                  type="button"
                  handleButtonClick={apiCall} />
          </div>
        </div>
      </section>
    )
  }
}

module.exports = Gallery;

对于我做错了什么的任何想法?

2 个答案:

答案 0 :(得分:2)

根据我的经验,这种类型的问题通常是因为您的转换不能按预期工作 - 或者您正在使用jquery(或任何其他库)通过将其包含在CDN链接。如果是这种情况,可以使用以下信息来帮助您解决问题:

首先,检查您的转换器是否实际上正在拉jquery。只是在页面上显示它并不一定允许此代码工作 - 因为当您的转换器运行时:

import $ from 'jquery'

预计首先从jquery加载node_modules包,然后为其创建一个内部名称,例如$_1将在您的包内使用。如果您打算通过CDN在页面上添加jquery,而不是以这种方式捆绑它,则需要在externalwebpack配置中将其标记为rollup。如果使用webpack,它将类似于:

{
  entry: '/path/to/your/application.js',
  externals: {
    'jquery': '$',
  }
}

这基本上告诉webpack,&#34;当我从'jquery'导入时,请不要查看node_modules - 而是假设页面上已存在jquery window.$。现在,webpack不会尝试包含并捆绑所有jquery lib - 而不是创建$_1,它实际上会尊重$

如果你打算加载并捆绑jquery作为你的构建的一部分(不推荐,由于它将带来令人难以置信的大小膨胀) - 我建议确保它&# 39;安装在node_modules中。你可以这样做:

npm install -S jquery

或者,如果您正在使用yarn

yarn add jquery

现在,您的import语句应该在重新转换时正确加载lib。

答案 1 :(得分:1)

首先,请确保您不使用jquery-lite,因为它排除了ajax个功能。

顺便说一下,不建议将exports.module与ES6 import / export一起使用。尽量使用其中一个。不太确定,但它可能会导致一些难以理解的module麻烦。

此外,根据$.ajax官方文档,您必须处理回调中的数据

  $.ajax({
    url: url,
    dataType: 'json',
    data: request,
    type: 'GET'
  })
  .done(function(data) {
    // Process data provided from callback function
    alert(data);
  })
  .fail(function() {
    alert('failed');
  })

我个人更喜欢isomorphic-fetchReact应用程序中进行ajax调用。