Question

我正在尝试进行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;

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

Answer 1

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

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

import $ from 'jquery'

预计首先从jquery加载node_modules包，然后为其创建一个内部名称，例如$_1将在您的包内使用。如果您打算通过CDN在页面上添加jquery，而不是以这种方式捆绑它，则需要在external或webpack配置中将其标记为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。

Answer 2

首先，请确保您不使用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-fetch在React应用程序中进行ajax调用。

Ajax调用返回undefined

2 个答案: