我正在尝试进行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;
对于我做错了什么的任何想法?
答案 0 :(得分:2)
根据我的经验,这种类型的问题通常是因为您的转换不能按预期工作 - 或者您正在使用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。
答案 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-fetch在React
应用程序中进行ajax调用。