为什么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

In my experience, this type of issue is most often because your transpilation is not working as you might expect - or you are transpiling your code while also using jquery (or any other lib) by including it with a CDN link. If this is the case, here's some info that might help you sort it out:

First, check that your transpiler is actually pulling jquery in. Just having it on the page won't necessarily allow this code to work - because when your transpiler operates on:

import $ from 'jquery'

It's going to expect to first load the jquery package from node_modules and then create an internal name for it, such as $_1 which will be used inside your bundle. If you intend to include jquery on the page via CDN, rather than bundling it in this fashion, you need to mark it as external in your webpack or rollup config. If using webpack, it would look something like:

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

This essentially tells webpack, "when I import from 'jquery', don't look in node_modules - instead, just assume jquery already exists on the page as window.$. Now, webpack won't attempt to include and bundle all of the jquery lib - and instead of creating $_1 it will actually honor what $ is.

If you do intend to load and bundle jquery as part of your build (not recommended, due to the incredible size-bloat it will entail) - I suggest ensuring that it's installed in node_modules. You can do this with:

npm install -S jquery

or, if you're using yarn:

yarn add jquery

Now, your import statement should load the lib correctly when you re-transpile.