javascript - 通过ajax获取json的类初始化总是失败

Question

我是 JavaScript 新手。我想制作一个在初始化时使用 Ajax 与 Flickr Web API 通信的类。

Photo2.js

  var Photo2;

  Photo2 = (function() {

    Photo2.prototype.json = null;

    function Photo2() {
      $.getJSON('http://www.flickr.com/services/rest/?jsoncallback=?', {
        format: 'json',
        method: 'flickr.photos.search',
        api_key: '7965a8bc5a2a88908e8321f3f56c80ea',
        user_id: '29242822@N00',
        per_page: '100'
      }, function(data) {
        this.json = data.photos.photo;
      });
    }

    return Photo2;

  })();

但是当初始化为 photo2 = new Photo2 时，它没有 photo2.json。

谢谢你的好意。

Answer 1

你真的应该重写你的代码。弄清楚您想要实现的目标既复杂又困难。

首先，从服务器获取数据是异步的，因此您无法确定在创建 Photo2 实例后是否会定义 json 属性。

接下来的事情是，在初始化对象时进行服务器调用真的是个坏主意。我建议您采用以下解决方案:

(function() {
  var Photo2 = function(callback) {
    this.json = null;
  };

  Photo2.prototype.getData =  function(successCallback) {
    var self = this;

    $.getJSON('http://www.flickr.com/services/rest/?jsoncallback=?', {
        format: 'json',
        method: 'flickr.photos.search',
        api_key: '7965a8bc5a2a88908e8321f3f56c80ea',
        user_id: '29242822@N00',
        per_page: '100'
      }, function(data) {
        self.json = data.photos.photo;
        typeof successCallback == 'function' && successCallback();
      }); 
  };

  var photo = new Photo2();
  photo.getData(function successCallback() {
    console.log('Data loaded', photo.json);
  });
}).call(this);

此处的工作演示:http://jsbin.com/ureyas/1/edit