TypeError：当我使用 $ 作为 jquery 时，__jquery2.default.ajax 不是函数答案

【问题标题】：TypeError: __jquery2.default.ajax is not a function when I used $ as jqueryTypeError：当我使用 $ 作为 jquery 时，__jquery2.default.ajax 不是函数
【发布时间】：2017-04-26 20:03:04
【问题描述】：

我正在向我的Express 服务器执行GET 请求。当我这样做时，我的服务器应该对Instagram API 执行 AJAX 请求。但是，我收到此错误：

TypeError: _jquery2.default.ajax is not a function
    at /Users/bli1/Development/projects/bradford/server/server.js:53:7
    at Layer.handle [as handle_request] (/Users/bli1/Development/projects/bradford/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/bli1/Development/projects/bradford/node_modules/express/lib/router/route.js:131:13)
    at Route.dispatch (/Users/bli1/Development/projects/bradford/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/Users/bli1/Development/projects/bradford/node_modules/express/lib/router/layer.js:95:5)
    at /Users/bli1/Development/projects/bradford/node_modules/express/lib/router/index.js:277:22
    at Function.process_params (/Users/bli1/Development/projects/bradford/node_modules/express/lib/router/index.js:330:12)
    at next (/Users/bli1/Development/projects/bradford/node_modules/express/lib/router/index.js:271:10)
    at goNext (/Users/bli1/Development/projects/bradford/node_modules/webpack-dev-middleware/middleware.js:194:41)
    at processRequest (/Users/bli1/Development/projects/bradford/node_modules/webpack-dev-middleware/middleware.js:236:12)

这是我的服务器代码的 sn-p：

import $ from 'jquery';

app.get("/instagram", (req, res) => {
    const instagramEndpoint = "https://api.instagram.com/v1/users/self/media/recent/?access_token=";
    const limit = 16;
    const user = "usertest";
    const keys = require('./keys.json');
    const accessToken = keys.instagram.accessToken;
    console.log('Hit Instagram API');
    $.ajax({
        method: 'GET',
        url: instagramEndpoint + accessToken[user],
        dataType: 'json',
        success: payload => {
            console.log(payload);
            return payload;
        },
        error: payload => {
            console.log(payload);

        }
    });
});

【问题讨论】：

jquery 在你调用它的时候已经加载了吗？
@Bindrid 应该是？它是在顶部导入的，但可能所有内容的异步性质都会导致一些竞争条件

标签： javascript jquery ajax express ecmascript-6

【解决方案1】：

我可以设法让 jquery 在我的快速路由中工作的唯一方法是使用 jsdom 来模拟 DOM 环境。

app.get('/silos', (request, response) => {
  require('jsdom').env('', (err, window) => {
    const $ = require('jquery')(window);
    $.get('http://demo2632149.mockable.io/silos')
      .then((successResponse) => {
        response.send(successResponse);
      });
  });
});

否则，如果您只想进行 REST 调用，我强烈建议您使用 axios。

import axios from 'axios';

app.get('/silos', (request, response) => {
  axios.get('http://demo2632149.mockable.io/silos')
    .then((successResponse) => {
      response.send(successResponse.data);
    });
});

【讨论】：

【解决方案2】：

我没有使用过 node.js，所以在这里猜测一下，但试试这个......

import $ from 'jquery';          

 $(document).ready( function () {

                app.get("/instagram", (req, res) => {
                    const instagramEndpoint = "https://api.instagram.com/v1/users/self/media/recent/?access_token=";
                    const limit = 16;
                    const user = "usertest";
                    const keys = require('./keys.json');
                    const accessToken = keys.instagram.accessToken;
                    console.log('Hit Instagram API');
                    $.ajax({
                        method: 'GET',
                        url: instagramEndpoint + accessToken[user],
                        dataType: 'json',
                        success: payload => {
                            console.log(payload);
                            return payload;
                        },
                        error: payload => {
                            console.log(payload);

                        }
                    });
                });

            });

【讨论】：