Ajax 调用返回未定义

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;

我在另一个模块中导入上述内容，并在 react 的 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'

它将首先从node_modules 加载jquery 包，然后为其创建一个内部名称，例如$_1，它将在您的包中使用。如果您打算通过 CDN 在页面上包含 jquery，而不是以这种方式捆绑它，则需要在您的 webpack 或 rollup 配置中将其标记为 external。如果使用webpack，它看起来像：

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

这实际上告诉 webpack，“当我从 'jquery' 导入时，不要查看 node_modules - 相反，假设 jquery 已经作为 window.$ 存在于页面上。现在，webpack 不会” t 尝试包含和捆绑所有 jquery 库 - 而不是创建 $_1 它实际上会尊重 $ 是什么。

如果您确实打算加载和捆绑jquery 作为构建的一部分（不推荐，因为它会导致令人难以置信的大小膨胀） - 我建议确保它安装在@ 987654342@。你可以这样做：

npm install -S jquery

或者，如果您使用的是yarn：

yarn add jquery

现在，您的 import 语句应该在您重新编译时正确加载库。

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 调用。